La, <mat-progress-bar> una Directiva Angular, se utiliza para mostrar una barra de progreso con el estilo del material.
En este capítulo, mostraremos la configuración necesaria para dibujar una barra de progreso determinista e indeterminada utilizando Material Angular.
Crear aplicación angular para barra 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 .
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{MatProgressBarModule, MatRadioModule, MatSliderModule}de@angular/materialimport{FormsModule, ReactiveFormsModule}de@angular/forms;@NgModule({ngModule
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatProgressBarModule,MatRadioModule,MatSliderModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{})
A continuación se muestra el contenido del archivo ts modificado app.component.css .
.tp-section {
pantalla: flex;
alinear-contenido: centro;
alinear-artículos: centro;
altura:60px;}.tp-margin {
margen:010px;}A continuación se muestra el contenido del archivo host HTML modificado app.component.html .
>>Color: [(ngModel)] ="color">value="primary">value
Primaria>> Primaria
Acento>> Acento
Advertencia>>Modo: [(ngModel)] ="mode">value="determinate">Valor determinado
Determinado
Indeterminado>>
Buffer>> Buffer
Consulta *ngIf="mode === determinado ||| mode === buffer">>Progress: [(ngModel)] ="value"> *ngIf="mode === buffer">>Buffer: [(ngModel)] ="bufferValue">>>Modo: {{mode}}{mode}}
[color] ="color"
[modo] ="modo"
[valor] ="valor"
BufferValue] ="bufferValue">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;
color =primario;
mode =determinado;value=50;
bufferValue =75;}
Valor de bufferValue =75;}
Resultado de la barra de progreso
Verifique el resultado.
Detalles
- Aquí, hemos creado la barra de progreso usando la barra de progreso mat-progress-bar.