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 –
Step | Description |
---|---|
1 | Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto |
2 | Modifique 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. |
3 | Compile 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&apos; import{AnimationsModule}from&apos;apos;@angular/platform-browser/animations&apos; import{MatProgressSpinnerModule,MatRadioModule,MatSliderModule}from&apos;@angular/material&apos;import{FormsModule,ReactiveFormsModuleFormsModule}from&apos;@angular/forms&apos;apos declaraciones:[AppComponent], importaciones:[BrowserModule,BrowserAnimationsModule,MatProgressSpinnerModule,MatRadioModule,MatSliderModule,FormsModule,ReactiveFormsModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}&lt;/pre&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;}&lt;/pre&gt;
A continuación se muestra el contenido del archivo host HTML modificado app.component.html .
DIFUNDE LA PALABRA- Primary&gt; Accent&gt; Warn&gt&gt;Mode: =&quot;mode&quot;mode&quot;value=&quot;determinate&quot;quot;gt; Determinado&gt; Indeterminado *ngf=&quot;mode ====Apost=determinado&apos&quot;apos&quot; Progreso: Valor... Mode: {{mode}}{mode}} =&quot;color&quot;; =&quot;modo&quot;modo&quot;; =&quot;value&quot;value&quot;gt;/pre&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:&apos;app-root&apos;, templateUrl:&apos;./app.component.html&apos;, styleUrls:[&apos;./app.component.css&apos;])exportclassAppComponent{ title =&apos;materialApp&apos;; color =&apos&primary&apos;; mode =&apos;determinate&apos;value=50;/pre&gt&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.