šŸŽ‰ Try the public beta of the new docs site at algolia.com/doc-beta! šŸŽ‰
UI libraries / Angular InstantSearch / Widgets

Angular InstantSearch isnā€™t compatible with Angularā€™s Ivy view engine. Weā€™re investigating how best to support this. For more information and to vote for Algoliaā€™s support of Angular 16 and beyond, see the GitHub issue Algolia Support for Angular InstantSearch

Signature
<ais-index
  indexName="string"
  // Optional parameters
  indexId="string"
></ais-index>
Import
1
2
3
4
5
6
7
8
import { NgAisIndexModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisIndexModule,
  ],
})
export class AppModule {}

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you donā€™t use. Read the Getting started guide for more information.

About this widget

This widget lets you apply widgets to a specific index. This is useful when you want to build an interface that targets multiple indices.

You can learn more about this pattern, called ā€œFederated Searchā€, in the guides on multi-index search.

The position of index in the widgets tree impacts which search parameters apply. Widgets that create search parameters forward them to their child index widgets.

1
2
3
4
5
6
7
8
<ais-instant-search>
  <ais-search-box></ais-search-box>
  <ais-hits></ais-hits>
  <ais-index indexName="media">
    <!-- The index inherits from the parent's `searchBox` search parameters -->
    <ais-hits></ais-hits>
  </ais-index>
</ais-instant-search>

The only exception to this rule is when two widgets own the same part of your UI state, like two ais-search-box widgets or two ais-refinement-list widgets on the same attribute. In that case, the latter takes precedence and overrides the search parameters.

1
2
3
4
5
6
7
8
9
<ais-instant-search>
  <ais-search-box></ais-search-box>
  <ais-hits></ais-hits>
  <ais-index indexName="media">
    <!-- The index does not inherit from the parent's `searchBox` search parameters -->
    <ais-search-box></ais-search-box>
    <ais-hits></ais-hits>
  </ais-index>
</ais-instant-search>

The same rule applies when you nest multiple index widgets.

Examples

1
2
3
<ais-index indexName="instant_search">
  <!-- Add widgets -->
</ais-index>

Options

Parameter Description
indexName
type: string
Required

The index to search into.

1
<ais-index indexName="instant_search"></ais-index>
indexId
type: string
default: value provided for indexName
Optional

An identifier for the index widget. Providing an indexId allows different index widgets to target the same Algolia index. Itā€™s especially useful for the routing feature, and lets you find the refinements that match an index widget.

1
2
3
4
<ais-index
  // ...
  indexId="instant_search_one"
></ais-index>
Did you find this page helpful?