Using Viewer Events
Our sample projects and report templates can help you learn the basics of working with our products.The dashboard viewer exposes its events as component bindings — here the export event fires when the user exports the dashboard.
In Angular.
How it works. Each event is a component output, so your app reacts to what the user does in the viewer.
In Angular.
import { Component } from "@angular/core";
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-angular/viewer";
@Component({
imports: [Viewer],
template: `<sti-viewer [report]="report" [options]="options" (onBeginExportReport)="onBeginExportReport($event)"></sti-viewer>`
})
export class Example {
report: Stimulsoft.Report.StiReport;
options: Stimulsoft.Viewer.StiViewerOptions;
onBeginExportReport(args: Stimulsoft.Viewer.BeginExportReportArgs) {
alert("onBeginExportReport");
}
constructor() {
this.report = new Stimulsoft.Report.StiReport();
this.report.loadFile("Dashboards/Dashboard.mrt");
this.options = new Stimulsoft.Viewer.StiViewerOptions();
this.options.toolbar.showSendEmailButton = true;
}
}onBeginExportReport— bound as a component event; the handler receivesBeginExportReportArgs.- Other events (print, data, design) bind the same way.
How it works. Each event is a component output, so your app reacts to what the user does in the viewer.