##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';

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

    To get a simple switch, add the following code inside the component 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">
    {{ setting.name }}
</igx-switch>

    The final result would be something like that:

    API References

    ###Additional Resources

    Our community is active and always welcoming to new ideas.