UI libraries
        /
          Angular InstantSearch
        /
          Widgets
  
        
          
          
          
        
        Dec. 04, 2023
      
  simple
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
        
        
      
    import { simple } from 'instantsearch.js/es/lib/stateMappings';
const routing = {
  stateMapping: simple(),
};
        About this widget
This simple state mapping is the default for the ais-instantsearch object’s routing prop.
The router provides an API that lets you customize some of its behaviors. To get a sense of what you can do with the API, see the Routing URLs guide.
The only transformation applied by the function is the omission of configure.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { simple } from 'instantsearch.js/es/lib/stateMappings';
simple().stateToRoute({
  instant_search: {
    query: 'Apple',
    page: 5,
    configure: {
      hitsPerPage: 4,
    },
  },
});
// Gives as output:
// {
//   instant_search: {
//     query: 'Apple',
//     page: 5,
//   },
// }
Examples
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { simple } from 'instantsearch.js/es/lib/stateMappings';
@Component({
  template: `
    <ais-instantsearch [config]="config">
      <!-- Widgets -->
    </ais-instantsearch>
  `
})
export class AppComponent {
  config = {
    // ...
    routing: {
      stateMapping: simple()
    }
  };
}
Did you find this page helpful?