Working with onDesign and onExit Events
Our sample projects and report templates can help you learn the basics of working with our products.The viewer and designer can be combined into one edit-and-preview flow, switching between them with a flag (Angular).
Toggle the two components with a flag.
How it works. A single flag chooses which component renders, so users move from preview to editing and back within one screen.
Toggle the two components with a flag.
@Component({
imports: [Designer, Viewer],
template: `
@if (isViewer) {
<sti-viewer [report]="report" [options]="viewerOptions"
(onDesignReport)="onDesignReport($event)"></sti-viewer>
} @else {
<sti-designer [(report)]="report" [options]="designerOptions"
(onExit)="onExitDesigner()"></sti-designer>
}`
})
export class WorkingWithOnDesignAndOnExitEvents {
isViewer = true;
onDesignReport(a) { this.isViewer = false; }
async onExitDesigner() { await this.report.renderAsync2(); this.isViewer = true; }
}onDesignReport— the viewer's Design button; switch the flag to show the designer.onExit— the designer's Exit menu; re-render the report and switch back to the viewer.
How it works. A single flag chooses which component renders, so users move from preview to editing and back within one screen.