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

    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:

    EXAMPLE

    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

    EXAMPLE

    App Builder | CTA Banner

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.