Class IgxCircularProgressBarComponent

Hierarchy

Hierarchy

  • BaseProgressDirective
    • IgxCircularProgressBarComponent

Implements

  • AfterViewInit
  • AfterContentInit

Constructors

Properties

_interval: any
animationDuration: number = 2000

Sets/Gets progressbar animation duration. By default it is 2000ms.

<igx-linear-bar [indeterminate]="true"></igx-linear-bar>
id: string = ...

An

Input

property that sets the value of id attribute. If not provided it will be automatically generated.

<igx-circular-bar [id]="'igx-circular-bar-55'" [value]="50"></igx-circular-bar>
indeterminate: boolean = false

Sets/Gets progressbar in indeterminate. By default it is set to false.

<igx-linear-bar [indeterminate]="true"></igx-linear-bar>
<igx-circular-bar [indeterminate]="true"></igx-circular-bar>
progressChanged: EventEmitter<IChangeProgressEventArgs> = ...

An event, which is triggered after a progress is changed.

public progressChange(event) {
alert("Progress made!");
}
//...
<igx-circular-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-circular-bar>
<igx-linear-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-linear-bar>
text: string

Sets/gets the text to be displayed inside the igxCircularBar.

<igx-circular-bar text="Progress"></igx-circular-bar>
let text = this.circularBar.text;
textVisibility: boolean = true

Sets the text visibility. By default it is set to true.

<igx-circular-bar [textVisibility]="false"></igx-circular-bar>

Accessors

  • 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);
    }

    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>

    Parameters

    • animate: boolean

    Returns void

  • 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);
    }

    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>

    Parameters

    • maxNum: number

    Returns void

  • 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);
    }

    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>

    Parameters

    • val: number

    Returns void

  • 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);
    }

    Returns number

Methods