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.