Ais-Toggle | Angular InstantSearch V4 (Deprecated)

Deprecated content

Angular InstantSearch is deprecated. Please use InstantSearch.js instead. For more information, see Migrating from Angular InstantSearch.

Signature

<ais-toggle
  [attribute]="string"
  [label]="string"

  // Optional parameters
  [on]="boolean|number|string"
  [off]="boolean|number|string"
></ais-toggle>

Import

Copy

1
2
3
4
5
6
7
8
import { NgAisToggleModule } from 'angular-instantsearch';

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

1
2
3
4
5
6
7
8
import { NgAisModule } from 'angular-instantsearch';

@NgModule({
  imports: [
    NgAisModule.forRoot(),
  ],
})
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.

The ais-toggle widget provides an on / off filtering feature based on an attribute value.

Examples

Copy
<ais-toggle
  attribute="free_shipping"
  label="Free Shipping"
></ais-toggle>

Props

`attribute`

Required

Type: string

The name of the attribute on which to apply the refinement.

To avoid unexpected behavior, you can’t use the same attribute prop in a different type of widget.

Copy
<ais-toggle
  attribute="free_shipping"
  label="Free Shipping"
></ais-toggle>

`label`

Required

Type: string

Label to display for the checkbox.

Copy
<ais-toggle
  attribute="free_shipping"
  label="Free Shipping"
></ais-toggle>

`on`

Optional

Type: boolean|number|string

The value of the refinement to apply on the attribute when checked.

Copy
<ais-toggle
  attribute="free_shipping"
  label="Free Shipping"
  on="yes"
></ais-toggle>

<ais-toggle
  attribute="free_shipping"
  label="Free Shipping"
  [on]="true"
></ais-toggle>

<ais-toggle
  attribute="free_shipping"
  label="Free Shipping"
  [on]="1"
></ais-toggle>

`off`