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
.
import { Component, ViewChild } from '@angular/core';
import { ProgressEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `
<div class="control-section">
<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 {
private eventTrace: string = '';
@ViewChild('clear')
private begin(args: ProgressEventArgs): void {
this.updateEventLog(args);
}
private end(args: ProgressEventArgs): void {
this.updateEventLog(args);
}
private progress(args: ProgressEventArgs): void {
this.updateEventLog(args);
}
private fail(args: Event): void {
this.updateEventLog(args);
}
private updateEventLog(args: any): void {
this.eventTrace = this.eventTrace + args.name + ' Event triggered. <br />'
}
private btnClick(): void {
this.eventTrace = '';
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
html, body, .control-section {
height: 95%;
}
.progress-btn-section {
text-align: center;
float: left;
}
.property-section {
overflow: auto;
width: 40%;
height: 330px;
float: right;
font-family: monospace;
}
.property-section th {
text-align: left;
}
#clear {
float: right;
clear: both;
}