Events in Angular Progress bar component

27 Apr 20244 minutes to read

Value Change

valueChanged event is triggered when the progress value is changed.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit, ViewChild } from '@angular/core';
import { ProgressBar, FontModel, AnimationModel, IProgressValueEventArgs } from '@syncfusion/ej2-progressbar';

@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

ProgressCompleted

ProgressCompleted event is triggered when the progress attains the Maximum value.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { FontModel, AnimationModel, IProgressValueEventArgs } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));