IgxLinearProgressBarComponent

Constructors

new IgxLinearProgressBarComponent(): IgxLinearProgressBarComponent

Returns IgxLinearProgressBarComponent

Properties

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:77

cssClass

cssClass: string = 'igx-linear-bar'

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:378

id

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:417

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:67

role

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:407

striped

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>

striped: boolean = false

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:388

textAlign

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 [textAlign]="positionCenter"></igx-linear-bar>

textAlign: IgxTextAlign = IgxTextAlign.START

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:450

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:468

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:459

type

Set type of the IgxLinearProgressBarComponent. 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:477

valueMin

valueMin: number = 0

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:375

animate

Inherited from: BaseProgressDirective

animate: boolean

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:183, projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:198

indeterminate

Inherited from: BaseProgressDirective

indeterminate: boolean

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:99, projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:113

max

Inherited from: BaseProgressDirective

max: number

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:211, projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:237

step

Inherited from: BaseProgressDirective

step: number

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:129, projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:143

text

Inherited from: BaseProgressDirective

text: string

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:160, projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:171

value

Inherited from: BaseProgressDirective

value: number

Defined in projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:301, projects/igniteui-angular/progressbar/src/progressbar/progressbar.component.ts:338

Accessors

valueInPercent

Inherited from: BaseProgressDirective

Returns the IgxLinearProgressBarComponent/IgxCircularProgressBarComponent 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:283

Returns number

Methods

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:511

Constructors