UI libraries / Angular InstantSearch / Widgets

ais-stats

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 
<ais-stats></ais-stats>
Import
Copy 
1
2
3
4
5
6
7
8

import { NgAisStatsModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisStatsModule,
  ],
})
export class AppModule {}

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples

About this widget

The ais-stats component displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).

Examples

Copy 
1

<ais-stats></ais-stats>

Templates

Parameter Description
state
type: object
  • hitsPerPage: number: maximum number of hits returned per page.
  • nbPages: number: number of pages returned. Calculation is based on the total number of hits (nbHits) divided by the number of hits per page (hitsPerPage), rounded up to the nearest integer.
  • nbHits: number: number of hits matched by the query.
  • page: number: index of the current page (zero-based).
  • processingTimeMS: number: time the server took to process the request, in milliseconds. This does not include network time.
  • query: string: an echo of the query text.
Copy 
1
2
3
4
5

<ais-stats>
  <ng-template let-state="state">
    {{state.nbHits}} results found in {{state.processingTimeMS}}ms.
  </ng-template>
</ais-stats>

HTML output

Copy 
1
2
3

<div class="ais-Stats">
  <span class="ais-Stats-text">20,337 results found in 1ms.</span>
</div>

Customize the UI with connectStats

If you want to create your own UI of the ais-stats widget, you can combine the connectStats connector with the TypedBaseWidget class.

See code examples

1. Extend the TypedBaseWidget class

First of all, you will need to write some boilerplate code to initialize correctly the TypedBaseWidget class. This happens in the constructor() of your class extending the TypedBaseWidget class.

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

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

@Component({
  selector: 'app-stats',
  template: '<p>It works!</p>'
})
export class Stats extends TypedBaseWidget {
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('Stats');
  }
}

There are a couple of things happening in this boilerplate:

  • create a Stats class extending TypedBaseWidget
  • reference the <ais-instantsearch> parent component instance on the Stats widget class
  • set app-stats as a selector, so we can use our component as <app-stats></app-stats>

2. Connect your custom widget

The TypedBaseWidget class has a method called createWidget() which takes two arguments: the connector to use and an object of options for this connector. We call this method at ngOnInit. This component now implements OnInit.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectStats, {
  StatsWidgetDescription,
  StatsConnectorParams
} from 'instantsearch.js/es/connectors/stats/connectStats';

@Component({
  selector: 'app-stats',
  template: '<p>It works!</p>'
})
export class Stats extends TypedBaseWidget<StatsWidgetDescription, StatsConnectorParams> {
  public state: StatsWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('Stats');
  }
  ngOnInit() {
    this.createWidget(connectStats, {
      // instance options
    });
    super.ngOnInit();
  }
}

3. Render from the state

Your component instance has access to a this.state property which holds the rendering options of the widget.

public state: StatsWidgetDescription['renderState'];
// {
//   hitsPerPage: number;
//   nbHits: number;
//   nbPages: number;
//   page: number;
//   processingTimeMS: number;
//   query: string;
//   widgetParams: object;
// }
Copy 
1
2
3

<div>
  {{state.nbHits}} results found in {{state.processingTimeMS}}ms.
</div>

Rendering options

Parameter Description
hitsPerPage
type: number

The maximum number of hits returned per page.
nbHits
type: number

The number of hits matched by the query.
nbPages
type: number

The number of returned pages. Calculation is based on the total number of hits (nbHits) divided by the number of hits per page (hitsPerPage), rounded up to the nearest integer.
page
type: number

The position of the current page (zero-based).
processingTimeMS
type: number

The time the server took to process the request, in milliseconds. This doesn’t include network time.
query
type: string

The query sent to the server.
widgetParams
type: object

All original widget options forwarded to the render function.

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectStats, {
  StatsWidgetDescription,
  StatsConnectorParams
} from 'instantsearch.js/es/connectors/stats/connectStats';

@Component({
  selector: 'app-stats',
  template: `
<div>
  {{state.nbHits}} results found in {{state.processingTimeMS}}ms.
</div>
`
})
export class Stats extends TypedBaseWidget<StatsWidgetDescription, StatsConnectorParams> {
  public state: StatsWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('Stats');
  }
  ngOnInit() {
    this.createWidget(connectStats, {
      // instance options
    });
    super.ngOnInit();
  }
}
Did you find this page helpful?
Angular InstantSearch v4