app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isDisable:boolean = false;
progress:number = 0;
timer: any;
maxValue:number = 250;
onClick(){
this.progress = 0;
this.isDisable = true;
this.timer = setInterval(() => this.updateProgress(), 100)
}
updateProgress(){
this.progress++
if(this.progress>=this.maxValue){
clearInterval(this.timer);
this.isDisable = false;
}
}
}
app.component.html
<h4 style="padding-top:25px; padding-bottom:25px;">
Angular Bootstrap - Show custom label in Progressbar
</h4>
<button (click)="onClick()" [disabled]="isDisable">Run Task</button>
<br/><br/>
<ngb-progressbar
#progressbar
type="info" [value]="progress"
[showValue]="false" [max]="maxValue" height="2rem">
{{progress + ' of '+ maxValue +' done.'}}
</ngb-progressbar>
- angular - Loop through an array of objects
- angular - How to use nested loop
- angular - How to bind style
- angular - How to use Button click event
- angular - How to call function on Button click
- angular - How to use ternary operator
- angular - How to generate random number
- angular bootstrap - How to use Collapse
- angular bootstrap - How to use Rating
- angular bootstrap - How to use Progressbar
- angular bootstrap - Show text inside Progressbar
- angular bootstrap - How to change Progressbar height
- angular bootstrap - How to use Popover
- angular bootstrap - Open Popover on mouse hover
- angular bootstrap - Open close Popover on button click