Switch
The Ignite UI for Angular Switch component is a binary choice selection component that behaves similarly to the switch component in iOS.
Angular Switch Example
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 in the Material Design guidelines.
The first step is to import the IgxSwitchModule
in the app.module.ts file:
// app.module.ts
...
import { IgxSwitchModule } from 'igniteui-angular';
// import { IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxSwitchModule],
...
})
export class AppModule {}
To get a simple switch as the one in the demo, add the following code inside the component template:
<igx-switch [checked]="true">
Simple switch
</igx-switch>
Switch properties
Let's enhance the code above by binding the switch properties to some data. Say, we have an array of settings objects, each having two properties - name
and state
. You can bind the switch component checked
property to the underlying 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>
Add some styles:
:host {
display: flex;
flex-flow: column nowrap;
padding: 16px;
}
igx-switch {
margin-top: 24px;
}
And the final result should be something like that:
Label Positioning
You can position the label using the switch's labelPosition
property:
<igx-switch labelPosition="before"></igx-switch>
If the labelPosition
is not set, the label will be positioned after the switch.
Styling
To get started with styling the switch, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Then, we create a new theme that extends the switch-theme
and use some of its parameters to style the switch's items:
// in styles.scss
$custom-switch-theme: switch-theme(
$thumb-on-color: #ECAA53,
$track-on-color: #F0CB9C
);
Including Themes
The last step is to include the component theme in our application.
If $legacy-support
is set to true
, include the component theme like that:
@include switch($custom-switch-theme);
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate
this encapsulation using ::ng-deep
:host {
::ng-deep {
@include switch($custom-switch-theme);
}
}
If $legacy-support
is set to false
(default), include the component css variables like that:
@include css-vars($custom-switch-theme);
Note
If the component is using an Emulated
ViewEncapsulation, you still have to use :host
because you need a global selector in order to override the variables.
:host {
@include css-vars($custom-switch-theme);
}
Demo
API References
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.