Switch

The Ignite UI for Angular Switch component is a binary choice selection component that behaves similarly to the switch component in iOS.

Switch Demo

Usage

At its core the switch component allows for toggling between on/off state. The default styling is done according to the selection controls specification as per the Material Design guidelines. To get started with the Ignite UI for Angular Switch, let's first import the IgxSwitchModule in the app.module.ts file:

// app.module.ts

...
import { IgxSwitchModule } from 'igniteui-angular/main';

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

To get a simple switch, add the following code inside the compnent template:

<igx-switch checked="true">
    Simple switch
</igx-switch>

If all went well, you should see something like the following in the browser:

Switch properties

Let's enhance the code above by binding the switch properties to some data. Say, we have an array of setting objects, each having two properties: name and state. You can bind the switch component checked property to the underlying setting object state property. Analogically you can bind the value property to name.

// toggle.component.ts
...
  public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
  ];

Enhance the component template by adding a switch for each setting and then binding the corresponding property:

<!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  <div style="width: 150px">
      {{ setting.name }}
  </div>
</igx-switch>

The final result would be something like that:

API Summary

Inputs

The following inputs are available on the igx-switch component:

Name Type Description
checked bool Switche is turned on if true.

Outputs

The following outputs are available on the igx-switch component:

Name Type Description
change EventEmitter Emits an event when the switch is turned on or off.

Additional Resources

Our community is active and always welcoming to new ideas.