The designer raises events for saving, creating, previewing and exiting — bind the ones you need as component events.

In Angular.
import { Component } from "@angular/core";
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-angular/designer";

@Component({
    imports: [Designer],
    template: `<sti-designer [(report)]="report" [options]="options" (onSaveReport)="onSaveReport($event)" (onCreateReport)="onCreateReport($event)" (onExit)="onExit($event)"></sti-designer>`
})
export class Example {
    report: Stimulsoft.Report.StiReport;
    options: Stimulsoft.Designer.StiDesignerOptions;

    onSaveReport(args: Stimulsoft.Designer.SaveReportArgs) {
        alert("onSaveReport event");
    }

    onCreateReport(args: Stimulsoft.Designer.CreateReportArgs) {
        var dataSet = new Stimulsoft.System.Data.DataSet("Demo");
        dataSet.readJsonFile("Data/Demo.json");
        args.this.report.regData("Demo", "Demo", dataSet);
        args.this.report.dictionary.synchronize();
    }

    onExit(args: Stimulsoft.Report.EventDataArgs) {
        alert("onExit event");
    }

    constructor() {
        this.report = new Stimulsoft.Report.StiReport();
        this.report.loadFile("Dashboards/Dashboard.mrt");

        this.options = new Stimulsoft.Designer.StiDesignerOptions();
        this.options.appearance.fullScreenMode = true;
    }
}

How it works. Each designer action is surfaced as an event, so your app can persist, seed or track the user's work.