Getting Started with searchstudio-ux-angular

Example

This is an example of using Angular with the SearchStax Site Search solution.

For a full example, see searchstudio-ux-angular.

Installation

1
npm install --save @searchstax-inc/searchstudio-ux-angular

Usage

Add following code to <head>

1
2
3
4
5
6
7
8
9
10
11
&lt;script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '&lt;https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '&lt;https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    &lt;/script>

Import Components

Import SearchstudioUxAngularModule:

1
import { SearchstudioUxAngularModule } from '@searchstax-inc/searchstudio-ux-angular';

App Module

Add SearchstudioUxAngularModule to imports[]:

1
2
3
4
5
@NgModule({
  imports: [
    SearchstudioUxAngularModule
  ]
})

Wrapper Component

Wrap all other components in <app-searchstax-wrapper>:

1
2
3
4
5
&lt;app-searchstax-wrapper>
 
  {/* Other SearchStudio components */}
 
&lt;/app-searchstax-wrapper>

Configuration

Pass search configuration to <app-searchstax-wrapper>:

1
2
3
4
5
6
7
8
9
&lt;app-searchstax-wrapper
  [searchURL]="config.searchURL"
  [suggesterURL]="config.suggesterURL"
  [trackApiKey]="config.trackApiKey"
  [searchAuth]="config.searchAuth"
  [beforeSearch]="beforeSearch"
  [afterSearch]="afterSearch"
>
&lt;/app-searchstax-wrapper>

Adding Components

Add any other Site Search angular component as needed:

1
2
3
4
5
6
7
8
9
&lt;app-searchstax-wrapper>
 
  &lt;app-searchstax-input>&lt;/app-searchstax-input>
 
  &lt;app-searchstax-results>&lt;/app-searchstax-results>
 
  {/* Other components */}
 
&lt;/app-searchstax-wrapper>

Styles

Import the CSS:

1
./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css