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 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">
    {{ setting.name }}
</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
@Input() id string The unique id attribute to be used for the switch. If you do not provide a value, it will be auto-generated.
@Input() labelId string The unique id attribute to be used for the switch label. If you do not provide a value, it will be auto-generated.
@Input() name string The name attribute to be used for the switch.
@Input() value any The value to be set for the switch.
@Input() tabindex number Specifies the tabbing order of the switch.
@Input() checked boolean Specifies the checked state of the switch.
@Input() required boolean Specifies the required state of the switch.
@Input() disabled boolean Specifies the disabled state of the switch.
@Input() disableRipple boolean Specifies the whether the ripple effect should be disabled for the switch.
@Input() labelPosition string or enum LabelPosition Specifies the position of the text label relative to the switch element.
@Input("aria-labelledby") ariaLabelledBy string Specify an external element by id to be used as label for the switch.

Outputs

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

Name Type Description
@Output() change EventEmitter Emitted when the switch checked value changes.

Methods

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

Name Description
toggle Toggles the checked state of the switch.

Additional Resources

Our community is active and always welcoming to new ideas.