Material angular 7 – Deslizador

El, <mat-slider> una Directiva Angular, se utiliza como un selector de rango mejorado con capacidades de diseño de material y animación.

En este capítulo, mostraremos la configuración necesaria para dibujar un control deslizante 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{MatSliderModule, MatCheckboxModule}de@angular/materialimport{FormsModule, ReactiveFormsModule}de@angular/forms;@NgModule({@angular/forms
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatSliderModule,MatCheckboxModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}

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

[desactivado] ="desactivado"
[invertido] ="invertido"
[thumbLabel] ="thumbLabel"
[(ngModel)] ="valor"
vertical] ="vertical">> [(ngModel)] ="thumbLabel">Mostrar etiqueta del pulgar> [(ngModel)] ="vertical">Vertical [(ngModel)] ="invertido">Invertido> [(ngModel)] ="desactivado">Desactivado

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

.tp-section {
pantalla: flex;
alinear-contenido: centro;
alinear-artículos: centro;
altura:60px;}.tp-margin {
margin:30px;}.mat-slider-horizontal {
ancho:300px;}.mat-slider-vertical {
altura:300px;}

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

importar{Componente}desde@angular/core;@Componente({ { {Componente
selector:app-root,
templateUrl:./app.component.html,
styleUrls:[./app.component.css]})exportclassAppComponent{Componente
title =materialApp;
disabled =falso;
invertido =falso;
thumbLabel =falso;value=0;
vertical =falso;}

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado cuatro casillas de verificación usando mat-checkbox y las enlazamos usando ngModel con variables. Estas propiedades se utilizarán para personalizar el deslizador.
  • Luego, hemos creado el deslizador y hemos mostrado sus diversos atributos ligados a variables en el archivo.ts.