Componente de barra de progreso angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente ProgressBar en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente ProgressBar: Se utiliza para hacer una barra que muestra el estado del proceso.

Propiedades:

• valor: Especifica el valor actual del progreso. Acepta un tipo de dato numérico, el valor por defecto es nulo.
• showValue: especifica si mostrar u ocultar el valor de la barra de progreso. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• unidad: Especifica el signo de Unidad anexado al valor. Es de tipo de datos de string, el valor predeterminado es %.
• modo: Especifica el modo del progreso, los valores válidos son «determinado» e «indeterminado». Es de tipo de datos de string, el valor predeterminado es determinado.

Estilo:

• p-progressbar: Es el elemento contenedor.
• p-progressbar-determinate: Es el elemento contenedor de una determinada barra de progreso.
• p-progressbar-indeterminate: Es el elemento contenedor de una barra de progreso indeterminada.
• p-progressbar-value: Es el elemento cuyo ancho cambia según el valor.
• p-progressbar-label: Es el elemento de etiqueta que muestra el valor actual.

Creación de aplicaciones angulares e instalación de módulos:

Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

Paso 3 : Instale PrimeNG en su directorio dado.

npm install primeng --save
npm install primeicons --save

Estructura del proyecto : después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente ProgressBar.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ProgressBar Component</h5>
<h5>Static Progress Bar</h5>
<p-progressBar [value]="30"></p-progressBar>
<h5>Indeterminate Progress Bar</h5>
<p-progressBar mode="indeterminate" 
               [style]="{'height': '6px'}">
</p-progressBar>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { ProgressBarModule } from 'primeng/progressbar';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressBarModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, crearemos el componente de barra de progreso dinámico que se actualizará aleatoriamente junto con mostrar con y sin el valor de estado de progreso.

<h1>GeeksforGeeks</h1>
<h4>PrimeNG ProgressBar Component</h4>
<div class="card">
  <h5>Dynamic (with status value)</h5>
  <p-progressBar [value]="gfg1"></p-progressBar>
  <h5>Dynamic (without status value)</h5>
  <p-progressBar [showValue]='false' [value]="gfg2"></p-progressBar>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg1: number = 0;
  gfg2: number = 0;
  
  ngOnInit() {
    setInterval(() => {
      this.gfg1 = this.gfg1 + Math.floor(Math.random() * 10) + 1;
      if (this.gfg1 >= 100) {
        this.gfg1 = 100;
      }
    }, 1500),
      setInterval(() => {
        this.gfg2 = this.gfg2 + Math.floor(Math.random() * 10) + 3;
        if (this.gfg2 >= 100) {
          this.gfg2 = 100;
        }
      }, 1500);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { ProgressBarModule } from 'primeng/progressbar';
  
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressBarModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/progressbar