IgxLinearProgressBarComponent

new IgxLinearProgressBarComponent(): IgxLinearProgressBarComponent

Returns IgxLinearProgressBarComponent

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

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

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

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

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

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

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

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

Inherited from: BaseProgressDirective

Gets the current state of the progress bar:

  • true if in the indeterminate state (no progress value displayed),
  • false if 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

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

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

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

Returns void