Angular PrimeNG ProgressBar属性

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到**Angular PrimeNG ProgressBar属性。

进度条组件用于通知用户一项任务的进展情况。一个进度条可以有两种类型。确定的和不确定的。确定的进度条告诉用户完成了多少进度，而不确定的进度条只是表明一些进程正在进行中。

Angular PrimeNG ProgressBar属性：

value。它是进度的当前值。它需要一个数字，默认值为空。
showValue。这个布尔属性决定是否显示进度条的值。
单位。它定义了进度条数值的单位。它接受一个字符串值。默认是”%”。
mode:它用于设置进度条的模式。它可以取两个值。”确定的 “和 “不确定的”。

语法:

<p-progressBar mode="indeterminate" 
    unit="percent"></p-progressBar>

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

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

ng new appname

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

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG ProgressBar属性

Project Structure

运行以下命令以启动应用程序：

ng serve --open

例子1：在这个例子中，我们展示了进度条的确定模式和不确定模式。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG ProgressBar Properties</h3>
  
<p-progressBar 
    mode="determinate" 
    [value]="34">
</p-progressBar>
  
<p-progressBar 
    mode="indeterminate" 
    [style]="{'height': '10px', 'margin-top': '20px'}">
</p-progressBar>

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

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

输出:

Angular PrimeNG ProgressBar属性

例子2：在这个例子中，我们使用进度条的单位属性改变了数值的单位。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG ProgressBar Properties</h3>
  
<p-progressBar 
    mode="determinate"
    [style]="{'margin-bottom': '40px'}"
    unit="percent"
    [value]="25">
</p-progressBar>
  
<p-progressBar 
    mode="determinate"
    [style]="{'margin-bottom': '40px'}"
    unit="$"
    [value]="45">
</p-progressBar>
  
<p-progressBar 
    mode="determinate"
    unit="EUR"
    [value]="65">
</p-progressBar>

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

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

输出:

Angular PrimeNG ProgressBar属性