Sets or gets the animationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [animationDuration]="1000">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

interface ProgressBarColorRanges {
     stop: String | Number;
     color: String;
}

Sets or gets the colorRanges property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [colorRanges]="colorRanges">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [disabled]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

enum ProgressBarLayout {
     normal,
     reverse
}

Sets or gets the layout property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [layout]="'reverse'">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [max]="250">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [min]="30">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

enum ProgressBarOrientation {
     vertical,
     horizontal
}

Sets or gets the orientation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [orientation]="'vertical'">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [rtl]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the renderText property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [renderText]="renderText">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showText property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

enum ProgressBarTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [theme]="'danger'">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true" [theme]="'arctic'">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the value is equal to the max. value.

Code examples

Bind to the complete event of jqxProgressBar.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar(onComplete)="Complete($event)"
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    Complete(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the user enters an invalid value( value which is not Number or is out of the min - max range. )

Code examples

Bind to the invalidvalue event of jqxProgressBar.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar(onInvalidvalue)="Invalidvalue($event)"
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    Invalidvalue(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxProgressBar.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar(onValueChanged)="ValueChanged($event)"
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent {
    ValueChanged(event: any): void 
    {
        // Do Something
    }

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myProgressBar') myProgressBar: jqxProgressBarComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myProgressBar.actualValue(20,20);
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myProgressBar') myProgressBar: jqxProgressBarComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myProgressBar.destroy();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxProgressBar #myProgressBar
            [width]="250" [height]="30" [value]="0" [showText]="true">
        </jqxProgressBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myProgressBar') myProgressBar: jqxProgressBarComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myProgressBar.val();
    }

    
}