API Reference / Angular InstantSearch / ais-stats

ais-stats

A
Signature 
<ais-stats></ais-stats>
See code examples

About this widget # A

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 # A

Copy 
1

<ais-stats></ais-stats>

Templates # A

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# A

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# A

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 #

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