Material angular 7 – Barra de progreso

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

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{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">

>>>>Valor de búfer

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

Verifique el resultado.

Detalles

  • Aquí, hemos creado la barra de progreso usando la barra de progreso mat-progress-bar.