Material angular 7 – CheckBox

La <mat-checkbox> una Directiva Angular, se utiliza como una casilla de verificación mejorada con capacidades de diseño de material y animación.

En este capítulo, mostraremos la configuración necesaria para dibujar un control de casillas de verificación utilizando Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatCheckboxModule}de@angular/material; import{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatCheckboxModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

Configuración de la casilla de verificación

 [(ngModel)] =""checked"">Checked [(ngModel)] =""indeterminate"">Indeterminate> [(ngModel)] =""disabled"">Disabled

Resultado

[(ngModel)] =""Comprobado""
[(indeterminado)] =""indeterminado""
[labelPosition] =""labelPosition""
[desactivado] =""desactivado"">
Casilla de verificación de la muestra

A continuación se muestra el contenido del archivo CSS modificado app.component.css .

.tp-h2 {
margen:10px;}.tp-sección {
pantalla: flex;
alinear-contenido: centro;
alinear-artículos: centro;
altura:60px;}.tp-margin {
margen:010px;}

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

importar{Componente}desde@angular/core; importar{FormControl}desde""@angular/forms"";@Component({ {Componente
selector:app-root,
templateUrl:./app.component.html,
styleUrls:[./app.component.css]})exportclassAppComponent{Componente
title =materialApp;checked=false;
indeterminado =falso;
labelPosition =después;
disabled =falso;}

paso check box angular material 7

Detalles

  • En primer lugar, hemos creado tres casillas de verificación usando mat-checkbox y las enlazamos usando ngModel con variables.
  • Luego, hemos creado otra casilla de verificación y hemos mostrado sus diversos atributos ligados a variables en el archivo.ts.