Trace events of progress button in Angular Progress button component

27 Sep 20233 minutes to read

The ProgressButton component triggers events based on its actions. The events can be used as extension points to perform custom operations.

The events available in ProgressButton are fail, begin, progress, and end.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { ProgressEventArgs } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
    selector: 'app-root',
    template: `
    <div class="e-section-control">
    <div class="progress-btn-section">
        <button ejs-progressbutton content='Progress' [enableProgress]='true' (begin)='begin($event)' (end)='end($event)' (progress)='progress($event)' (fail)='fail($event)' cssClass='e-hide-spinner'></button>
    </div>
    <div class="property-section">
        <table id="propertyTable" title="Event trace">
            <tbody>
                <th>Event trace:-</th>
                <tr>
                <td [innerHTML]="eventTrace"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <button #clear id="clear" ejs-button cssClass='e-small' (click)='btnClick()'>Clear</button>
    </div>
    `
})

export class AppComponent {
begin($event: any) {
throw new Error('Method not implemented.');
}
    public eventTrace: string = '';
    public end(args: ProgressEventArgs): void {
        this.updateEventLog(args);
    }
    public progress(args: ProgressEventArgs): void {
        this.updateEventLog(args);
    }
    public fail(args: Event): void {
        this.updateEventLog(args);
    }
    public updateEventLog(args: any): void {
        this.eventTrace = this.eventTrace + args.name + ' Event triggered. <br />'
    }

    public btnClick(): void {
        this.eventTrace = '';
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ProgressButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);