PrimeNg Progress Bar
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
Just desire to say your article is as astounding. The clarity in your post is just spectacular and i can assume you’re an expert on this subject. Well with your permission let me to grab your feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.
if Progress Bar is static, try following in the css, worked for me
:host::ng-deep .p-progressbar-indeterminate .p-progressbar-value:after {
background-color: rgb(232, 179, 21) !important;
}