Skip to main content

angular bootstrap - How to change Progressbar height

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 = 100;
  height ='35px';

  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 - How to change Progressbar height
</h4>

<button (click)="onClick()" [disabled]="isDisable">Run Task</button>
<br/><br/>

<ngb-progressbar type="secondary" [value]="progress">
    Height Default
</ngb-progressbar>
<br/>

<ngb-progressbar type="secondary" [value]="progress" height="2rem">
  Height 2rem
</ngb-progressbar>
<br/>

<ngb-progressbar type="secondary" [value]="progress" height="50px">
  Height 50px
</ngb-progressbar>
<br/>

<ngb-progressbar type="secondary" [value]="progress" height="15px">
  Height 15px
</ngb-progressbar>
<br/>

<ngb-progressbar type="secondary" [value]="progress" [height]="height">
  Height {{height}}
</ngb-progressbar>
More Angular tutorials
Labels: