Thursday, September 20, 2018

Primeng -Learn Angular Progressbar Example

In this blog post, We are going to learn Primeng Angular Progressbar tutorials with example.
Primeng is Rich UI library for providing rich ui components of an Angular framework. It Provides progress bar UI Component.

Angular Progressbar Component example 

progressbar is a UI component is used to indicate the progressive state of an event or action. For example, This will be shown to the user about 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 Horizontal progress status of an action. It gives progress status to the user during below operations.

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

This will be very helpful for user experience

. First, We need to create an Angular application using Angular CLI tool and Next is Install it and configure it in your application. You can check below articles about creation and installation in the application.
This post will not talk about creating an application and install Primeng framework into the angular application. The below code works on Angular 4 / Angular 5/Angular 6 versions. Latest Primeng Version is preferable.

Import ProgressBar Module into Application

It provides every component in the form of a module. To use this component, Import module 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

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 as below
primeng Angular Progressbar Static example

Dynamic Progress bar 

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


app.component.html
<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.
indeterminate
This shows a progress bar of a operation continuously ie indeterminate times. For example, Loading One lack records from Excel to Database. It shows the status bar continuously until data is completely loaded. Once data is finished loading, It will not show status bar
determinate 
This shows estimated status of the operation over a total operation status. For example, Two loads one lack records, It shows the progress like 10% status to end user if 10000 records are loaded. It will show the status until it reaches 100%.
modes:- indeterminate or determinate
<p-progressBar mode="indeterminate" [style]="{'height': '20px'}"></p-progressBar>

and output is
primeng Angular Progressbar indeterminate example

Related article


EmoticonEmoticon