_interval

animationDuration

<igx-linear-bar [indeterminate]="true"></igx-linear-bar>
Copy

indeterminate

<igx-linear-bar [indeterminate]="true"></igx-linear-bar>
<igx-circular-bar [indeterminate]="true"></igx-circular-bar>
Copy

progressChanged

public progressChange(event) {
    alert("Progress made!");
}
 //...
Copy

<igx-circular-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-circular-bar>
<igx-linear-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-linear-bar>
Copy

animate

• get animate(): boolean

• Returns whether the progress bar has animation true/false.

  @ViewChild("MyProgressBar")
  public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
  public animationStatus(event) {
      let animationStatus = this.progressBar.animate;
      alert(animationStatus);
  }
  Copy

  Returns boolean

• set animate(animate): void

• Animating the progress. By default it is set to true.

  <igx-linear-bar [animate]="false" [max]="200" [value]="50"></igx-linear-bar>
  <igx-circular-bar [animate]="false" [max]="200" [value]="50"></igx-circular-bar>
  Copy

  Parameters

  • animate: boolean

  Returns void

max

• get max(): number

• Returns the the maximum progress value of the progress bar.

  @ViewChild("MyProgressBar")
  public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
  public maxValue(event) {
      let max = this.progressBar.max;
      alert(max);
  }
  Copy

  Returns number

• set max(maxNum): void

• Set maximum value that can be passed. By default it is set to 100.

  <igx-linear-bar [max]="200" [value]="0"></igx-linear-bar>
  <igx-circular-bar [max]="200" [value]="0"></igx-circular-bar>
  Copy

  Parameters

  • maxNum: number

  Returns void

step

• get step(): number

• Returns the value which update the progress indicator of the progress bar.

  @ViewChild("MyProgressBar")
  public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
  public stepValue(event) {
      let step = this.progressBar.step;
      alert(step);
  }
  Copy

  Returns number

• set step(val): void

• Sets the value by which progress indicator is updated. By default it is 1.

  <igx-linear-bar [max]="200" [value]="0" [step]="1"></igx-linear-bar>
  <igx-circular-bar [max]="200" [value]="0" [step]="1"></igx-circular-bar>
  Copy

  Parameters

  • val: number

  Returns void

value

• get value(): number

• Returns value that indicates the current IgxLinearProgressBarComponent position.

  @ViewChild("MyProgressBar")
  public progressBar: IgxLinearProgressBarComponent;
  public getValue(event) {
      let value = this.progressBar.value;
      alert(value);
  }
  Copy

  Returns number

• set value(val): void

• Set value that indicates the current IgxLinearProgressBarComponent position.

  <igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-bar>
  Copy

  Parameters

  • val: number

  Returns void

valueInPercent

• get valueInPercent(): number

• Returns the IgxLinearProgressBarComponent/IgxCircularProgressBarComponent value in percentage.

  @ViewChild("MyProgressBar")
  public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
  public valuePercent(event){
      let percentValue = this.progressBar.valueInPercent;
      alert(percentValue);
  }
  Copy

  Returns number