mat-slide-toggle en material angular

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo. 

mat-slide-toggle es un tipo de interruptor o botón que se usa para alternar entre estados como uno y apagado o verdadero o falso.

Sintaxis de instalación:

ng add @angular/material

Acercarse:

• Primero, instale el material angular usando el comando mencionado anteriormente.
• Después de completar la instalación, importe » desde ‘@angular/material/’ en el archivo app.module.ts.
• Luego use la etiqueta mat-slide-toggle para mostrar un botón de alternar.
• Y para escribir el significado de ese botón, debemos mencionarlo entre las etiquetas de apertura y cierre.
• Si queremos cambiar el tema, podemos cambiarlo usando la propiedad de color. En angular tenemos 3 temas, son primarios, acentuados y advertidos.
• Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.

Implementación de código:

aplicación.módulo.ts:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
      
import { AppComponent } from './app.component'; 
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
      
@NgModule({ 
imports: 
[ BrowserModule, 
    FormsModule, 
  MatSlideToggleModule
], 
declarations: [ AppComponent ], 
bootstrap: [ AppComponent ] 
}) 
  
export class AppModule { }

aplicación.componente.html:

<mat-slide-toggle color="primary">
  Slide me to get the primary theme!
</mat-slide-toggle> <br />
<br />
<mat-slide-toggle color="accent">
  Slide me to get the accent theme!
</mat-slide-toggle>
<br />
<br />
<mat-slide-toggle color="warn">
  Slide me to get the warn theme!
</mat-slide-toggle>

Producción: