Sets the value of id attribute. If not provided it will be automatically generated.
<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
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>
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>
Sets the value of the role attribute. If not provided it will be automatically set to progressbar.
<igx-linear-bar role="progressbar"></igx-linear-bar>
Set IgxLinearProgressBarComponent to have striped style. By default it is set to false.
<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
Set a custom text that is displayed according to the defined position.
<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
Set the position that defines where the text is aligned.
Possible options - IgxTextAlign.START (default), IgxTextAlign.CENTER, IgxTextAlign.END.
public positionCenter: IgxTextAlign;
public ngOnInit() {
this.positionCenter = IgxTextAlign.CENTER;
}
//...
<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
Set the position that defines if the text should be aligned above the progress line. By default is set to false.
<igx-linear-bar type="error" [textTop]="true"></igx-linear-bar>
Set the text to be visible. By default it is set to true.
<igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
Set type of the IgxLinearProgressBarComponent. Possible options - default, success, info, warning, and error.
<igx-linear-bar [striped]="false" [max]="100" [value]="0" type="error"></igx-linear-bar>
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);
}
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>
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);
}
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>
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);
}
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>
Returns value that indicates the current IgxLinearProgressBarComponent position.
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent;
public getValue(event) {
let value = this.progressBar.value;
alert(value);
}
Set value that indicates the current IgxLinearProgressBarComponent position.
<igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-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/Gets progressbar animation duration. By default it is 2000ms.