Using the two Viewer in the One Project
Our sample projects and report templates can help you learn the basics of working with our products.Because the viewer is a component, you can place several instances on one page. This example shows two independent viewers side by side.
Viewer setup. Configure the viewer, load the report, assign it to the component, and process the requests or events raised by the UI.
Viewer setup. Configure the viewer, load the report, assign it to the component, and process the requests or events raised by the UI.
@Component({
selector: "two-viewers",
imports: [Viewer],
template: `
<sti-viewer [report]="report1" [options]="viewerOptions"></sti-viewer>
<sti-viewer [report]="report2" [options]="viewerOptions"></sti-viewer>`
})
export class TwoViewers {
report1 = new Stimulsoft.Report.StiReport();
report2 = new Stimulsoft.Report.StiReport();
viewerOptions = new Stimulsoft.Viewer.StiViewerOptions();
constructor() {
this.report1.loadFile("Reports/SimpleList.mrt");
this.report2.loadFile("Reports/TwoSimpleLists.mrt");
this.viewerOptions.height = "100vh";
}
}