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.
@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; }
}

How it works. A single flag chooses which component renders, so users move from preview to editing and back within one screen.

Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.