Angular InstantSearch
Before building your UI, don't forget to install the library.
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
Basics
| ais-instantsearch |
A wrapper that allows you to configure your search. |
| ais-index |
This widget lets you apply widgets to a specific Algolia index. It’s useful when you want to build a federated search interface. |
| ais-search-box |
A widget to let users set a text-based query. |
| ais-configure |
A widget that lets you provide raw search parameters to the Algolia API without rendering anything. |
| ais-configure-related-items |
A widget that computes search parameters to use in related items experiences, without rendering anything. |
| ais-panel |
A widget that wraps other widgets in a consistent panel design. It also reacts when the widget no longer can refine. |
| ais-voice-search |
A widget to let users perform a voice-based query. |
Results
| ais-hits |
A widget to display a list of results. |
| ais-infinite-hits |
A widget to display a list of results with a “Show more” button. |
| ais-highlight |
A widget that displays highlighted attributes of your search results. |
| ais-snippet |
A widget that displays attributes in your search results in a shorter form (a snippet). |
Refinements
| ais-refinement-list |
A component that displays a list that lets users choose multiple values for a specific facet. |
| ais-color-refinement-list |
A widget that filters results based on color facet values. It helps users quickly visualize the kind of color that products have. |
| ais-hierarchical-menu |
A component that displays a tree menu for browsing attributes. |
| ais-range-slider |
A widget that allows a user to select a numeric range using a third party slider (noUiSlider in that case). |
| ais-menu |
A widget allows a user to select a single value to refine from a list. |
| ais-current-refinements |
A widget that displays a list of refinements applied to the search. |
| ais-range-input |
A widget that allows a user to select a numeric range using a minimum and maximum input. |
| ais-toggle |
A widget that provides an on / off filtering feature based on an attribute value. |
| ais-numeric-menu |
A component that displays a menu that lets users choose a single range for a specific numeric attribute. |
| ais-rating-menu |
A widget that lets users refine search results by clicking on stars. |
| ais-clear-refinements |
A widget that displays a button that lets users clean every refinement applied to the search. |
Pagination
| ais-pagination |
A widget that displays a pagination system which lets users change the current page of search results. |
| ais-hits-per-page |
A widget that displays a dropdown menu to let users change the number of displayed hits. |
Metadata
| ais-breadcrumb |
A component that lets users see where the current page is in relation to the facet’s hierarchy. |
| ais-stats |
A component that displays the total number of matching hits and the time it took to get them (time spent in the Algolia server). |
| ais-query-rule-custom-data |
A widget to display custom data from Rules. |
| ais-query-rule-context |
A widget to set Rule contexts without rendering anything. |
Sorting
| ais-sort-by |
A widget that displays a list of indices, allowing a user to change the way hits are sorted with replica indices. |
Routing
| simple |
A state mapping used by default with routing. |
| history |
A router used by default with routing. |
| uiState |
An object that represents the state of the search. |
