API Reference / Angular InstantSearch Widgets / ais-instantsearch
Apr. 24, 2019

ais-instantsearch

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Widget signature 
<ais-instantsearch
  [config]="{
    indexName: string
    searchClient: object
    // Optional parameters
    numberLocale: string
    searchFunction: function
    routing: boolean|object
  }"
></ais-instantsearch>
See code examples

About this widget #

The ais-instantsearch widget is a wrapper that lets you configure the credentials for search. This component automatically provides the search state to all its children.

Note that every other Angular InstantSearch widgets must be wrapped under this one.

Examples #

Edit
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import * as algoliasearch from 'algoliasearch/lite';

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

Props #

indexName #
type: string
Required

The main index to search into.
Edit
Copy 
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 #
type: object
Required

Provides a search client to ais-instantsearch. To implement a custom search client, take a look at a the custom back-end guide.
Edit
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import * as algoliasearch from 'algoliasearch/lite';

@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `,
})
export class AppComponent {
  config = {
    // ...
    searchClient: algoliasearch(
      'AJ0P3S7DWQ',
      '90dfaaf5755e694f341fe68f6e41a6d4'
    ),
  }
}
numberLocale #
type: string
Optional

The locale used to display numbers. This is passed to .toLocaleString().
Edit
Copy 
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 #
type: function
Optional

A hook that is called each time a search needs to be done, with the helper as a parameter. It’s your responsibility to call helper.search(). This option allows you, for example, to avoid doing searches at page load.
Edit
Copy 
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();
    }
  }
}
routing #
type: boolean|object
default: true
Optional

Enables the default routing feature by passing true. More advanced usage is documented in the routing guide.
Edit
Copy 
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,
  }
}

HTML output#

Copy
1
2
3

<div class="ais-InstantSearch">
  <!-- Widgets -->
</div>

Did you find this page helpful?

Angular InstantSearch v3