Events in Angular Progress bar component
14 Nov 20225 minutes to read
Value Change
valueChanged event is triggered when the progress value is changed.
import { Component, OnInit, ViewChild } from '@angular/core';
import { ProgressBar, FontModel, AnimationModel, IProgressValueEventArgs } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template:
`<ejs-progressbar #charts id='charts' type='Linear' trackThickness=24 progressThickness=24 value = 90 [labelStyle]='labelStyle' (valueChanged)='valueChanged($event)' [showProgressValue]='showProgressValue' [animation]='animation'>
</ejs-progressbar>
<button id="reLoad" (click)="onClick()">ValueChanged</button>`
})
export class AppComponent implements OnInit {
public animation: AnimationModel;
public labelStyle: FontModel;
public showProgressValue: boolean;
@ViewChild('charts')
public charts: ProgressBar;
public valueChanged(args: IProgressValueEventArgs): void {
args.progressColor = '#2BB20E';
}
public onClick = () => {
this.charts.value = 50;
}
ngOnInit(): void {
this.animation = { enable: true, duration: 2000, delay: 0 };
this.labelStyle = { color: '#FFFFFF' };
this.showProgressValue = true;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ProgressBarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
ProgressCompleted
ProgressCompleted event is triggered when the progress attains the Maximum value.
import { Component, OnInit } from '@angular/core';
import { FontModel, AnimationModel, IProgressValueEventArgs } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template:
`<ejs-progressbar id='percentage' type='Linear' trackThickness=24 progressThickness=24 value = 100 [labelStyle]='labelStyle' (progressCompleted)='progressCompleted($event)' [showProgressValue]='showProgressValue' [animation]='animation'>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
public animation: AnimationModel;
public labelStyle: FontModel;
public showProgressValue: boolean;
public progressCompleted(args: IProgressValueEventArgs): void {
args.progressColor = '#2BB20E';
}
ngOnInit(): void {
this.animation = { enable: true, duration: 2000, delay: 0 };
this.labelStyle = { color: '#FFFFFF' };
this.showProgressValue = true;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ProgressBarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);