API Reference / Angular InstantSearch Widgets / ais-stats
Apr. 24, 2019

ais-stats

You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.

Widget signature 
<ais-stats></ais-stats>
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

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>

Customize the UI - connectStats

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

See code examples

1. Extend the BaseWidget class

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

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

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

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

There are a couple of things happening in this boilerplate:

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

2. Connect your custom widget

The BaseWidget 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

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectStats } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-stats',
  template: '<p>It works!</p>'
})
export class Stats extends BaseWidget {
  public state: {
    // render options
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    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: {
  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
35

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectStats } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-stats',
  template: `
<div>
  {{state.nbHits}} results found in {{state.processingTimeMS}}ms.
</div>
`
})
export class Stats extends BaseWidget {
  public state: {
     hitsPerPage: number;
     nbHits: number;
     nbPages: number;
     page: number;
     processingTimeMS: number;
     query: string;
     widgetParams: object;
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('Stats');
  }
  ngOnInit() {
    this.createWidget(connectStats, {
      // instance options
    });
    super.ngOnInit();
  }
}

HTML output

Copy
1
2
3

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

Did you find this page helpful?

Angular InstantSearch v3