Ais-Instantsearch | Angular InstantSearch V4 (Deprecated)

Signature

<ais-instantsearch
  [config]="{
    indexName: string
    searchClient: object
    // Optional parameters
    numberLocale: string
    searchFunction: function
    initialUiState: object
    onStateChange: function
    stalledSearchDelay: number
    routing: boolean|object
    insightsClient: function
  }"
></ais-instantsearch>

1
2
3
4
5
6
7
8
import { NgAisInstantSearchModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisInstantSearchModule.forRoot(),
  ],
})
export class AppModule {}

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
export class AppModule {}

About this widget

The ais-instantsearch widget is a wrapper that allows you to configure your search. It provides the search state to all its children.

You must wrap all other Angular InstantSearch widgets inside this one.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { liteClient as algoliasearch } from 'algoliasearch/lite';

@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    indexName: 'instant_search',
    searchClient: algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'),
  }
}

Props

indexName

The main index in which to search.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    indexName: 'instant_search',
  }
}

searchClient

Provides a search client to ais-instantsearch. Read the custom backend guidance on implementing a custom search client.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { liteClient as algoliasearch } from 'algoliasearch/lite';

@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    searchClient: algoliasearch(
      'YourApplicationID',
      'YourSearchOnlyAPIKey'
    ),
  }
}

numberLocale

The locale used to display numbers. This is passed to .toLocaleString().

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    numberLocale: 'fr',
  }
}

searchFunction

This option allows you to take control of search behavior. For example, to avoid doing searches at page load.

When this option is set, search.helper won’t emit events. Instead, use on-state-change or widgets to handle search behavior.

A hook is called each time a search is requested (with Algolia’s helper API as a parameter). Carry out the search by calling helper.search().

When modifying the state of the helper within search-function, the helper resets the page to 0. If you want to keep the current page, you need to store the information about the page, modify the state and reapply the pagination.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    searchFunction(helper) {
      helper.search();
    }
  }
}

initialUiState

Adds a ui-state to your instantsearch instance, which provides an initial state to your widgets.

Replace YourIndexName with the name of your Algolia index.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    initialUiState: {
      YourIndexName: {
        query: 'phone',
        page: 5,
      },
    },
  }
}

onStateChange

Triggers when the state changes. This can be useful when performing custom logic on a state change.

When using on-state-change, the instance is under your control. You’re responsible for updating the UI state (with setUiState).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    onStateChange({ uiState, setUiState }) {
      // Custom logic

      setUiState(uiState);
    },
  }
}

stalledSearchDelay

A time period (in ms) after which the search is considered to have stalled. Read the slow network guide for more information.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    stalledSearchDelay: 500,
  }
}

routing

The router configuration used to save the UI state into the URL or any client-side persistence. The object is accepted if it has either of these keys:

• router: object: this object is the part that saves the UI state. By default, it uses an instance of the history-router with the default parameters. It accepts:
  • onUpdate: function: adds an event listener that makes InstantSearch aware of external changes to the storage medium (such as the URL). Typically you’ll set up a listener for popstate, which triggers a callback with the current routeState.
  • read: function: reads the routing storage and gets routeState. It doesn’t take any parameters but returns an object.
  • write: function: pushes routeState into routing storage.
  • createURL: function: transforms routeState into a URL. It receives an object and returns a string (which may be empty).
  • dispose: function: cleans up all event listeners.
• stateMapping: object: transforms the ui-state into the object saved by the router. The default value is provided by simple-state-mapping. It accepts:
  • stateToRoute: function: transforms a ui-state representation into routeState. It receives an object that contains the UI state of all the widgets on the page. It can return any object that is readable by routeToState.
  • routeToState: function: transforms routeState into a ui-state representation. It receives an object that contains the UI state stored by the router. It can return any object that is readable by stateToRoute.

For more information, read the routing guide.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    routing: true,
  }
}

insightsClient

This function is exposed by the search-insights library (usually window.aa) and is required if you want to send click and conversion events with InstantSearch.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    insightsClient: (window as any).aa,
  }
}