ejProgressBar

The ProgressBar control is a graphical control element used to visualize the changing status of an extended operation.

Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.js

    • module:ej.core.js

    • module:ej.progressbar.js

    Members

    cssClass string

    Sets the root CSS class for ProgressBar theme, which is used customize.

    Default Value

    • null

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" cssClass="cssClass"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    The css must be defined in stylesheet.

  • html
  • <style>
    .cssClass{
        border: 10px solid grey;
    }
    </style>

    enabled boolean

    When this property sets to false, it disables the ProgressBar control

    Default Value

    • true

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [enabled]=true></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    enablePersistence boolean

    Save current model value to browser cookies for state maintains. While refresh the progressBar control page retains the model value apply from browser cookies

    Default Value

    • false

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [enablePersistence]=true></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    enableRTL boolean

    Sets the ProgressBar direction as right to left alignment.

    Default Value

    • false

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [enableRTL]=true></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    height number|string

    Defines the height of the ProgressBar.

    Default Value

    • null

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    htmlAttributes object

    It allows to define the characteristics of the progressBar control. It will helps to extend the capability of an HTML element.

    Default Value

    • {}

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [htmlAttributes]="html"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     html: any;
      constructor() {
          this.html={title: "Demo"};
      }
    }

    maxValue number

    Sets the maximum value of the ProgressBar.

    Default Value

    • 100

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [maxValue]="maxValue"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      maxValue: int;
      constructor() {
          this.maxValue=45;
      }
    }

    minValue number

    Sets the minimum value of the ProgressBar.

    Default Value

    • 0

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [minValue]="minValue"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      minValue: int;
      constructor() {
          this.minValue=10;
      }
    }

    percentage number

    Sets the ProgressBar value in percentage. The value should be in between 0 to 100.

    Default Value

    • 0

    Example

  • html
  • <ej-progressbar height="20" text="10%" [percentage]="percentage"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    percentage: int;
      constructor() {
          this.percentage=10;
      }
    }

    showRoundedCorner boolean

    Displays rounded corner borders on the progressBar control.

    Default Value

    • false

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [showRoundedCorner]=true></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    text string

    Sets the custom text for the ProgressBar. The text placed in the middle of the ProgressBar and it can be customizable using the class ‘e-progress-text’.

    Default Value

    • null

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    TEXT

    value number

    Sets the ProgressBar value. The value should be in between min and max values.

    Default Value

    • 0

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    width number|string

    Defines the width of the ProgressBar.

    Default Value

    • null

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" width="500px"></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
     
      constructor() {
      }
    }

    Methods

    destroy()

    Destroy the progressbar widget

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Destroy</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    var obj = $("#progressbar").data("ejProgressBar");
    
    
    obj.destroy();
    
    }
    }
  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Destroy</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    $("#progressbar").ejProgressBar("destroy");
    
    }
    }

    disable()

    Disables the progressbar control

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Disable</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    var obj = $("#progressbar").data("ejProgressBar");
    
    
    obj.disable();
    
    }
    }
  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Disable</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    $("#progressbar").ejProgressBar("disable");
    
    }
    }

    enable()

    Enables the progressbar control

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" [enabled]=false ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">enable</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    var obj = $("#progressbar").data("ejProgressBar");
    
    
    obj.enable();
    
    }
    }
  • html
  • <ej-progressbar value="45" height="20" text="45%" [enabled]=false></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Enable</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    $("#progressbar").ejProgressBar("enable");
    
    }
    }

    getPercentage()

    Returns the current progress value in percent.

    Returns:

    number

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Get Percentage</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    var obj = $("#progressbar").data("ejProgressBar");
    
    
    obj.getPercentage();
    
    }
    }
  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">GETPERCENTAGE</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    $("#progressbar").ejProgressBar("getPercentage");
    
    }
    }

    getValue()

    Returns the current progress value

    Returns:

    number

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">Get Value</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    var obj = $("#progressbar").data("ejProgressBar");
    
    
    obj.getValue();
    
    }
    }
  • html
  • <ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>
    
    <button type="button" (click)="OnClick()">GETVALUE</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       OnClick(){
    
    
    $("#progressbar").ejProgressBar("getValue");
    
    }
    }

    Events

    change

    Event triggers when the progress value changed

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the ProgressBar model
    percentage object returns the current progress percentage
    type string returns the name of the event
    value string returns the current progress value

    Example

    CHANGE

    complete

    Event triggers when the process completes (at 100%)

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the ProgressBar model
    percentage object returns the current progress percentage
    type string returns the name of the event
    value string returns the current progress value

    Example

    COMPLETE

    create

    Event triggers when the progressbar are created

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the progressbar model
    type string returns the name of the event

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" (create)="create($event)" ></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       create(args){
    
    
    
    
    }
    }

    destroy

    Event triggers when the progressbar are destroyed

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the progressbar model
    type string returns the name of the event

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" (destroy)="Destroy($event)" ></ej-progressbar>
    <button type="button" (click)="OnClick()">Destroy</button>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       Destroy(args){
    
    
    
    
    }
        OnClick(){
    
    
    var obj = $("#progressbar").data("ejProgressBar");
    
    
    obj.destroy();
        }
    }

    start

    Event triggers when the process starts (from 0%)

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the ProgressBar model
    percentage object returns the current progress percentage
    type string returns the name of the event
    value string returns the current progress value

    Example

  • html
  • <ej-progressbar value="45" height="20" text="45%" (start)="start($event)" ></ej-progressbar>
  • ts
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html',
      styleUrls: ['./progressbar.component.css'],
      encapsulation: ViewEncapsulation.None,
    })
    export class DefaultComponent{
    
      
      constructor() {
          
      }
       start(args){
    
    
    
    
    }
    }