Material angular 7 – Spinner de progreso

La<mat-progress-spinner>, una Directiva Angular, se utiliza para mostrar un spinner de progreso con estilo de material.

En este capítulo, mostraremos la configuración necesaria para dibujar un spinner de progreso determinista e indeterminado utilizando Material Angular.

Crear aplicación angular para Spinner de progreso

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 .

component&amp;apos; import{AnimationsModule}from&amp;apos;apos;@angular/platform-browser/animations&amp;apos; import{MatProgressSpinnerModule,MatRadioModule,MatSliderModule}from&amp;apos;@angular/material&amp;apos;import{FormsModule,ReactiveFormsModuleFormsModule}from&amp;apos;@angular/forms&amp;apos;apos
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatProgressSpinnerModule,MatRadioModule,MatSliderModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}&amp;lt;/pre&amp;gt;

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

Pre-traducción bastante impresa.
   pantalla: flex;
   alinear-contenido: centro;
   alinear-artículos: centro;
   altura:60px;}.tp-margin {
   Margen: 010px;}&amp;lt;/pre&amp;gt;

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

DIFUNDE LA PALABRA-
         Primary&amp;gt;
         Accent&amp;gt;
         Warn&amp;gt&amp;gt;Mode: =&amp;quot;mode&amp;quot;mode&amp;quot;value=&amp;quot;determinate&amp;quot;quot;gt;
         Determinado&amp;gt;
         Indeterminado *ngf=&amp;quot;mode ====Apost=determinado&amp;apos&amp;quot;apos&amp;quot; Progreso: Valor... Mode: {{mode}}{mode}}
      =&amp;quot;color&amp;quot;;
      =&amp;quot;modo&amp;quot;modo&amp;quot;;
      =&amp;quot;value&amp;quot;value&amp;quot;gt;/pre&amp;gt;gt;

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

"Pre notranslate prettyprinted" importación de "Componente de""angular/core"""Componente
   selector:&amp;apos;app-root&amp;apos;,
   templateUrl:&amp;apos;./app.component.html&amp;apos;,
   styleUrls:[&amp;apos;./app.component.css&amp;apos;])exportclassAppComponent{
   title =&amp;apos;materialApp&amp;apos;;
   color =&amp;apos&amp;primary&amp;apos;;
   mode =&amp;apos;determinate&amp;apos;value=50;/pre&amp;gt&amp;gt;

Resultado del spinner

Verifique el resultado.

Detalles del spinner en Angular

  • Aquí, hemos creado el spinner de progreso usando el spinner de estera-progreso.