Angular PrimeNG动态进度条

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。本文将向我们展示如何在Angular PrimeNG中使用ProgressBar动态。我们还将了解代码中使用的属性及其语法。

ProgressBar组件用于制作一个显示进程状态的条形图。

语法:

<p-progressBar 
    [showValue]='...' 
    [style]="{...}" 
    [value]="...">
</p-progressBar>

Angular PrimeNG ProgressBar动态属性：

value。它指定了进度的当前值。它接受多种数据类型，默认值为空。
showValue。它指定是否显示或隐藏进度条的值。它是布尔数据类型，默认值为真。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构：完成安装后，它将看起来像下面这样。

Angular PrimeNG动态进度条

运行以下命令以查看输出：

ng serve --open

示例1：以下是说明使用Angular PrimeNG ProgressBar动态的示例代码，没有状态值。

<h1 style="color: green">GeeksforGeeks</h1>
<h5>
      Angular PrimeNG ProgressBar 
    Dynamic (without status value)
</h5>
<p-progressBar 
        [showValue]='false' 
        [style]="{'width': '400px'}" 
        [value]="gfg2">
</p-progressBar>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    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';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   ProgressBarModule,
   ToastModule,
   FormsModule,
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG动态进度条

例子2：下面是另一个例子代码，说明了Angular PrimeNG ProgressBar动态的状态值。

<h1 style="color: green">GeeksforGeeks</h1>
<h5>
      Angular PrimeNG ProgressBar 
      Dynamic (with status value)
</h5>
<p-progressBar 
    [value]="gfg1">
</p-progressBar>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    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';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   ProgressBarModule,
   ToastModule,
   FormsModule,
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG动态进度条