{

Primeng Progressbar tutorial| p-progress bar example


Angular 13 primeng 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 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 { }

Static Progress bar

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

Dynamic Progress bar

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

indeterminate progress bar

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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Angular 13 Lowercase pipe tutorial | How to Convert a string to small case example

Angular 13 Sweetalert tutorial|popup notification in Angular example

Angular 13 Titlecase pipe tutorial | How to Capitalize the first letter of each word of a string example

Angular 13 UpperCase pipe tutorial | How to Convert a String to Uppercase example

Angular LocalStorage, SessionStorage example | Ngx-webstorage tutorial

Angular primeng bar chart|p-chart bar type example

Angular Semantic UI Popup Modal | ng2-semantic-ui example