The ProgressBar component indicates a status of some process, task, or whatever. It can deal with static as well as dynamic values. A dynamic value is a value changing in time. The next code snippet demonstrates two progress bars, with a static and dynamic value:
<p-growl [value]="msgs"></p-growl>
<h3>Static value</h3>
<p-progressBar [value]="40"></p-progressBar>
<h3>Dynamic value</h3>
<p-progressBar [value]="value"></p-progressBar>
The dynamic value gets produced every 800 milliseconds from 1 to 100 with the Observable methods as follows:
export class ProgressBarComponent implements OnInit, OnDestroy {
msgs: Message[];
value: number;
interval$: Subscription;
ngOnInit() {
const interval = Observable.interval(800).take(100);
this.interval$ = interval.subscribe(
x => this.value = x + 1,
() => {/** no error handling */ },
() => this.msgs...