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 the user 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 the user 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 let the end user choose multiple values for a specific facet. |
| ais-color-refinement-list |
A widget that filters results based on color facet values. It helps the user 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 the user choose a single range for a specific numeric attribute. |
| ais-rating-menu |
A widget that lets the user refine search results by clicking on stars. |
| ais-clear-refinements |
A widget that displays a button that lets the user clean every refinement applied to the search. |
Pagination
| ais-pagination |
A widget that displays a pagination system allowing the user to change the current page. |
| ais-hits-per-page |
A widget that displays a dropdown menu to let the user change the number of displayed hits. |
Metadata
| ais-breadcrumb |
A component that lets the user 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. |
