Angular Switch Component Overview
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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Switch
To get started with the Ignite UI for Angular Switch component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
cmd
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxSwitchModule
in your 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 {}
typescript
Alternatively, as of 16.0.0
you can import the IgxSwitchComponent
as a standalone dependency.
// home.component.ts
import { IgxSwitchComponent } from 'igniteui-angular';
// import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: ` <igx-switch [checked]="true"> Simple switch </igx-switch> `,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxSwitchComponent],
})
export class HomeComponent {}
typescript
Now that you have the Ignite UI for Angular Switch module or component imported, you can start using the igx-switch
component.
Using the Angular Switch
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.
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>
html
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}
];
typescript
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>
html
Add some styles:
:host {
display: flex;
flex-flow: column nowrap;
padding: 16px;
}
igx-switch {
margin-top: 24px;
}
scss
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>
html
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';
scss
Then, we create a new theme that extends the switch-theme
and use some of its parameters to style the switch's items:
$custom-switch-theme: switch-theme(
$thumb-on-color: #ecaa53,
$track-on-color: #f0cb9c,
);
scss
The last step is to include the component theme in our application.
@include css-vars($custom-switch-theme);
scss
Demo
API References
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.