<mat-progress-bar> en material angular

Introducción:

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo. La etiqueta <mat-progress-bar> se utiliza para mostrar la barra de progreso. Las barras de progreso se utilizan para indicar el estado de una tarea en particular.

Sintaxis de instalación:

ng add @angular/material

Acercarse:

• Primero, instale el material angular usando el comando mencionado anteriormente.
• Después de completar la instalación, importe ‘MatProgressBarModule’ desde ‘@angular/material/progress-bar’ en el archivo app.module.ts.
• Para usar las barras de progreso, simplemente debemos usar la etiqueta <mat-progress-bar>.
• Hay muchos tipos de barras de progreso como determinadas, indeterminadas, amortiguadoras, etc.
• Para mostrar el progreso, necesitamos dar una propiedad de valor a la etiqueta.
• Si queremos cambiar el tema, podemos cambiarlo usando la propiedad de color. En angular tenemos 3 temas, son primarios, acentuados y advertidos.
• Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.

Implementación de código:

aplicación.módulo.ts:

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { MatProgressBarModule } from '@angular/material'; 
    
import { AppComponent } from './example.component'; 
    
@NgModule({ 
  declarations: [AppComponent], 
  exports: [AppComponent], 
  imports: [ 
    CommonModule, 
    FormsModule, 
    MatProgressBarModule
  
  ], 
}) 
export class AppModule {}

aplicación.componente.html:

<h4> Progress Bars with primary theme </h4>
  
<mat-progress-bar mode="determinate" 
    value="40"></mat-progress-bar>
<br><br><br>
  
<mat-progress-bar mode="buffer" 
    value="40"></mat-progress-bar>
<br><br><br>
  
<mat-progress-bar mode="indeterminate" 
    value="40"></mat-progress-bar>
  
<h4> Progress Bars with warn theme </h4>
<mat-progress-bar mode="determinate" 
    value="40" color="warn"></mat-progress-bar>
<br><br><br>
  
<mat-progress-bar mode="buffer" value="40" 
    color="warn"></mat-progress-bar>
<br><br><br>
  
<mat-progress-bar mode="indeterminate" 
    value="40" color="warn"></mat-progress-bar>
<br><br><br>
  
<h4> Progress Bars with accent theme </h4>
  
<mat-progress-bar mode="determinate" value="40"
        color="accent"></mat-progress-bar>
<br><br><br>
  
<mat-progress-bar mode="buffer" value="40" 
    color="accent"></mat-progress-bar>
<br><br><br>
  
<mat-progress-bar mode="indeterminate" 
    value="40" color="accent"></mat-progress-bar>

Producción: