UI libraries / Angular InstantSearch

Before building your UI, don't forget to install the library.

Angular InstantSearch is deprecated. Please use InstantSearch.js instead. For more information, see Migrating from 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-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.

Did you find this page helpful?