Primeng Progressbar tutorial| p-progress bar example

Primeng Progressbar tutorial| p-progress bar example

In this blog post, We are going to learn Primeng Angular Progressbar tutorials with examples.

Primeng is a Rich UI library for providing rich UI components of an Angular framework. It Provides a progress bar UI Component.

Angular Primeng Progressbar Component example

progressbar is a UI component used to indicate the progressive state of an event or action.

This will be shown to the user about the status during the upload of a file to a server. This will be given the status of the file upload status to the user.

Primeng provides the Horizontal progress status of an action. It gives progress status to the user during the below operations.

  • File upload status
  • Backend Database processing
  • REST API Operations

It is useful for the user experience.

. First, We need to create an Angular application using the Angular CLI tool and Next is to install and configure it in your application.

You can check the below articles about the creation and installation of the application.

This post will not talk about creating an application and installing the Primeng framework into the angular application.

The below code works on Angular 10/ Angular 11/Angular 12 versions. The latest Primeng Version is preferable.

Import ProgressBar Module into Application

This framework provides every component in the form of an angular module.

To use this component, Import ProgressBarModule in the application module.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ProgressBarModule } from "primeng/progressbar";
import { GrowlModule } from "primeng/growl";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressBarModule, // Progress Bar support
    GrowlModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

How to display Static Progress bar in Angular

In this, the Progress Bar value is fixed. It will show some percentage of the total status of the progress bar.

<p-progressBar [value]="90"></p-progressBar>

You can see the output below

primeng Angular Progressbar Static example

How to add Dynamic Progress bar in Angular Application using primeng

The progress bar status is changing dynamically. For example, Emit values for every 100 milliseconds from 1 to 100 values. Generate the Timer using rxjs Interval operations Emit the values from 1 to 100 using take rxjs Operators. the emit values are subscribed and binding to a progress bar

app.component.ts;

import { Component, OnInit } from "@angular/core";
import { Message, MessageService } from "primeng/api";
import { interval, Subscription } from "rxjs";
import { take } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  outputMsg: Message[];

  statusNum: number = 0;
  subscription$: Subscription;

  constructor() {}
  ngOnInit() {
    const interval$ = interval(10);
    const timer = interval$.pipe(take(100));
    this.subscription$ = timer.subscribe(
      (val) => {
        this.statusNum = val + 1;
        console.log(this.statusNum);
      },
      () => {},
      () =>
        (this.outputMsg = [
          { severity: "success", summary: "Success", detail: "Tasks Done" },
        ])
    );
  }
}

Html Template Changes:

<div style="text-align:center">
  <h1>Primeng Angular ProgressBar Component Example</h1>
</div>
<p-growl [value]="outputMsg"></p-growl>

<div style="text-align:center">
  <p-progressBar [value]="statusNum"></p-progressBar>
</div>

And output is

primeng Angular Progressbar dynamic example

How to show an indeterminate progress bar in the Angular app

There are two types of modes of progress bars we can configure. modes:- indeterminate or determinate

indeterminate This shows a progress bar of an operation continuously, i.e indeterminate times. For example, Loading One lacks records from Excel to Database. It shows the status bar continuously until the data is completely loaded. Once data is finished loading, It will not show the status bar.

determinate It shows the estimated status of the operation over a total operation status. For example, if two loads lack records, It shows the progress like 10% status to the end-user if 10000 records are loaded. It will show the status until it reaches 100%.

<p-progressBar
  mode="indeterminate"
  [style]="{'height': '20px'}"
></p-progressBar>

and output is

primeng Angular Progressbar indeterminate example

Conclusion

To Sum up, You learned how to integrate progressbar in the angular application, an example for static and dynamic bars, and progressbar modes determinate and indeterminate.