Angular PrimeNG ProgressBar Properties

Last Updated : 24 Sep, 2022

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see Angular PrimeNG ProgressBar Properties.

ProgressBar Component is used to notify the user about the progress of a task. A progress bar can be of two types: determinate and indeterminate. The determinate progress bar tells the user how much progress is done while the indeterminate progress bar just indicates that some process is going on.

Angular PrimeNG ProgressBar Properties:

value: It is the current value of the progress. It takes a number and the default value is null.
showValue: This boolean property decides whether to show the progress bar value or not.
unit: It defines the unit of the progress bar value. It accepts a string value. The default is “%”.
mode: It is used to set the mode of the progress bar. It can take two values: “determinate” and “indeterminate”.

Syntax:

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

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Run the below command to start the application:

ng serve --open

Example 1: In this example, we show the determinate and indeterminate modes of the progress bar.

app.component.html

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

app.component.ts

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

app.module.ts

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

Output:

Example 2: In this example, we altered the unit of the value using the unit property of the progress bar.

app.component.html

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

app.component.ts

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

app.module.ts

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