Tonight I want to show you how easy to make a progresbar with Prime Ng. As usual we must add progressbar component to the app.module
|
1 2 3 |
import {ProgressBarModule} from 'primeng/progressbar'; .. imports: [ ProgressBarModule ] |
Second step is using it in your html file. So we must decide status bar type “dynamic, static or indeterminate”. I will show you to use indeterminate progressbar. Add the code below to your html file below the button you use.
|
1 2 3 |
<div class="col-md-2" *ngIf="div_visible" > <p-progressBar mode="indeterminate" ></p-progressBar> </div> |
And we will control the progressbar by div_visible variable. When our process has finished (fetching data vs..), we will set it to false and make the div invisible.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
... div_visible: boolean = false; ... search() { this.div_visible = true; // progress start. this.service.GetData(this.selectedUserCode) .subscribe( result => {this.dataList = result }, err => console.log(err), () => { this.div_visible = false;// progress finish. }); } |
That’s all. You can also use ProgressSpinner instead of ProgressBar as you wish. You should have a look at my another post about PrimeNg ContextMenu
If you have question do not forget to write from the chat button next to it or from the comment