Descripción general de los componentes del conmutador Angular

    El componente Ignite UI for Angular Switch es un componente de selección de elección binaria que se comporta de forma similar al componente switch de iOS.

    Angular Switch Example

    Getting Started with Ignite UI for Angular Switch

    Para comenzar con el componente Ignite UI for Angular Switch, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    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 {}

    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 {}

    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

    En esencia, el componente del interruptor permite alternar entre el estado de encendido y apagado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.

    Para obtener un cambio simple como el de la demostración, agregue el siguiente código dentro de la plantilla del componente:

    <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}
];

    Mejore la plantilla del componente agregando un modificador para cada configuración y luego vinculando la propiedad correspondiente:

    <!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  {{ setting.name }}
</igx-switch>

    Añade algunos estilos:

    :host {
  display: flex;
  flex-flow: column nowrap;
  padding: 16px;
}

igx-switch {
  margin-top: 24px;
}

    Y el resultado final debería ser algo así:

    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.

    Estilismo

    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 by providing just two parameters - $thumb-off-color and $thumb-on-color you can get a fully styled switch, as the theme generates all the rest of the necessary colors based on these two, you can of course override any of the other parameters for a customized look:

    $custom-switch-theme: switch-theme(
  $thumb-off-color: #7cadd5,
  $thumb-on-color: #ecaa53,
);

    The last step is to include the component theme in our application.

    @include css-vars($custom-switch-theme);

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.