An @Input property that sets the value of the indeterminate attribute. If not provided it will be automatically set to false.
<igx-circular-bar [indeterminate]="true"></igx-circular-bar>An event, which is triggered after a progress is changed.
public progressChange(event) {
alert("Progress made!");
}
//...<igx-circular-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-circular-bar>Sets/gets the text to be displayed inside the igxCircularBar.
<igx-circular-bar text="Progress"></igx-circular-bar>let text = this.circularBar.text;Sets the text visibility. By default it is set to true.
<igx-circular-bar [textVisibility]="false"></igx-circular-bar>Returns whether the IgxCircularProgressBarComponent has animation true/false.
@ViewChild("MyProgressBar")
public progressBar: IgxCircularProgressBarComponent;
public animationStatus(event) {
let animationStatus = this.progressBar.animate;
alert(animationStatus);
}Animation on progress IgxCircularProgressBarComponent. By default it is set to true.
<igx-circular-bar [animate]="false" [value]="50"></igx-circular-bar>Returns the the maximum progress value of the IgxCircularProgressBarComponent.
@ViewChild("MyProgressBar")
public progressBar: IgxCircularProgressBarComponent;
public maxValue(event) {
let max = this.progressBar.max;
alert(max);
}<igx-circular-bar [max]="245" [animate]="false" [value]="currentValue"></igx-circular-bar>Set maximum value that can be passed. By default it is set to 100.
<igx-circular-bar [max]="200" [value]="0"></igx-circular-bar>Returns the value which update the progress indicator of the IgxCircularProgressBarComponent.
@ViewChild("MyProgressBar")
public progressBar: IgxCircularProgressBarComponent;
public stepValue(event) {
let step = this.progressBar.step;
alert(step);
}Sets the value by which progress indicator is updated. By default it is 1% of the maximum value.
<igx-circular-bar [striped]="false" [max]="200" [value]="0" [step]="1"></igx-circular-bar>Returns value that indicates the current IgxCircularProgressBarComponent position.
@ViewChild("MyProgressBar")
public progressBar: IgxCircularProgressBarComponent;
public getValue(event) {
let value = this.progressBar.value;
alert(value);
}<button igxButton="fab" igxRipple="" (click)="getValue()">Click</button>Set value that indicates the current IgxCircularProgressBarComponent position.
<igx-circular-bar [value]="50"></igx-circular-bar>Returns the IgxLinearProgressBarComponent/IgxCircularProgressBarComponent value in percentage.
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
public valuePercent(event){
let percentValue = this.progressBar.valueInPercent;
alert(percentValue);
}Sets the IgxLinearProgressBarComponent/IgxCircularProgressBarComponent value in percentage.
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
public setValue(event){
this.progressBar.valueInPercent = 56;
}
//...<button igxButton="fab" igxRipple="" (click)="setValue()">setValue</button>
An @Input property that sets the value of
idattribute. If not provided it will be automatically generated.<igx-circular-bar [id]="'igx-circular-bar-55'" [value]="50"></igx-circular-bar>