Constructors
Section titled "Constructors"IgxLinearProgressBarComponent
new IgxLinearProgressBarComponent(): IgxLinearProgressBarComponent Returns IgxLinearProgressBarComponent
Properties
Section titled "Properties"animationDuration
Section titled "animationDuration"Inherited from: BaseProgressDirective
Sets/Gets progressbar animation duration. By default, it is 2000ms.
<igx-linear-bar [animationDuration]="3000"></igx-linear-bar>
<igx-circular-bar [animationDuration]="3000"></igx-linear-bar> animationDuration: number = 2000 Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:78
cssClass
Section titled "cssClass"cssClass: string = 'igx-linear-bar' Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:380
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> id: string Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:419
progressChanged
Section titled "progressChanged"Inherited from: BaseProgressDirective
An event, which is triggered after progress is changed.
public progressChange(event) {
alert("Progress made!");
}
//...<igx-circular-bar (progressChanged)="progressChange($event)"></igx-circular-bar>
<igx-linear-bar (progressChanged)="progressChange($event)"></igx-linear-bar> progressChanged: EventEmitter<IChangeProgressEventArgs> Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:68
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> role: string = 'progressbar' Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:409
striped
Section titled "striped"Set linear progress bar to have striped style. By default it is set to false.
<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar> striped: boolean = false Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:390
textAlign
Section titled "textAlign"Set the position that defines where the text is aligned.
Possible options - START (default), CENTER, END.
public positionCenter: IgxTextAlign;
public ngOnInit() {
this.positionCenter = IgxTextAlign.CENTER;
}
//...<igx-linear-bar [textAlign]="positionCenter"></igx-linear-bar> textAlign: IgxTextAlign = IgxTextAlign.START Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:452
textTop
Section titled "textTop"Set the position that defines if the text should be aligned above the progress line. By default, is set to false.
<igx-linear-bar [textTop]="true"></igx-linear-bar> textTop: boolean = false Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:470
textVisibility
Section titled "textVisibility"Set the text to be visible. By default, it is set to true.
<igx-linear-bar [textVisibility]="false"></igx-linear-bar> textVisibility: boolean = true Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:461
Set type of the linear progress bar. Possible options - default, success, info, warning, and error.
<igx-linear-bar [type]="'error'"></igx-linear-bar> type: string = 'default' Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:479
valueMin
Section titled "valueMin"valueMin: number = 0 Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:377
Accessors
Section titled "Accessors"animate
Section titled "animate"Inherited from: BaseProgressDirective
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);
} get animate(): boolean Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:199
Returns boolean
Animating the progress. By default, it is set to true.
<igx-linear-bar [animate]="false"></igx-linear-bar>
<igx-circular-bar [animate]="false"></igx-circular-bar> set animate(animate: boolean): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:184
Parameters
- animate:
boolean
Returns void
indeterminate
Section titled "indeterminate"Inherited from: BaseProgressDirective
Gets the current state of the progress bar:
trueif in the indeterminate state (no progress value displayed),falseif the progress bar shows the actual progress.
const isIndeterminate = progressBar.indeterminate; get indeterminate(): boolean Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:114
Returns boolean
Sets 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> set indeterminate(isIndeterminate: boolean): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:100
Parameters
- isIndeterminate:
boolean
Returns void
Inherited from: BaseProgressDirective
Returns the maximum progress value of the progress bar.
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
public maxValue(event) {
let max = this.progressBar.max;
alert(max);
} get max(): number Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:238
Returns number
Set maximum value that can be passed. By default it is set to 100.
<igx-linear-bar [max]="200"></igx-linear-bar>
<igx-circular-bar [max]="200"></igx-circular-bar> set max(maxNum: number): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:212
Parameters
- maxNum:
number
Returns void
Inherited from: BaseProgressDirective
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);
} get step(): number Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:130
Returns number
Sets the value by which progress indicator is updated. By default, it is 1.
<igx-linear-bar [step]="1"></igx-linear-bar>
<igx-circular-bar [step]="1"></igx-circular-bar> set step(val: number): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:144
Parameters
- val:
number
Returns void
Inherited from: BaseProgressDirective
Gets a custom text.
let text = this.circularBar.text; get text(): string Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:172
Returns string
Set a custom text. This will hide the counter value.
<igx-circular-bar text="my text"></igx-circular-bar> set text(value: string): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:161
Parameters
- value:
string
Returns void
value
Section titled "value"Inherited from: BaseProgressDirective
Returns value that indicates the current linear progress bar/circular progress bar position.
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent;
public getValue(event) {
let value = this.progressBar.value;
alert(value);
} get value(): number Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:302
Returns number
Set value that indicates the current linear progress bar / circular progress bar position.
<igx-linear-bar [value]="50"></igx-linear-bar>
<igx-circular-bar [value]="50"></igx-circular-bar> set value(val: number): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:339
Parameters
- val:
number
Returns void
valueInPercent
Section titled "valueInPercent"Inherited from: BaseProgressDirective
Returns the linear progress bar/circular progress bar value in percentage.
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent
public valuePercent(event){
let percentValue = this.progressBar.valueInPercent;
alert(percentValue);
} get valueInPercent(): number Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:284
Returns number
Methods
Section titled "Methods"ngAfterContentInit
Section titled "ngAfterContentInit"A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit(): void Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:513