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

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

Usage

Add following code to <head>

<script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    </script>

Import Components

Import SearchstudioUxAngularModule:

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

App Module

Add SearchstudioUxAngularModule to imports[]:

@NgModule({
  imports: [
    SearchstudioUxAngularModule
  ]
})

Wrapper Component

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

<app-searchstax-wrapper>

  {/* Other SearchStudio components */}

</app-searchstax-wrapper>

Configuration

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

<app-searchstax-wrapper
  [searchURL]="config.searchURL"
  [suggesterURL]="config.suggesterURL"
  [trackApiKey]="config.trackApiKey"
  [searchAuth]="config.searchAuth"
  [beforeSearch]="beforeSearch"
  [afterSearch]="afterSearch"
>
</app-searchstax-wrapper>

Adding Components

Add any other Site Search angular component as needed:

<app-searchstax-wrapper>

  <app-searchstax-input></app-searchstax-input>

  <app-searchstax-results></app-searchstax-results>

  {/* Other components */}

</app-searchstax-wrapper>

Styles

Import the CSS:

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