This example shows how to integrate the report viewer into an application. First, import scripts:

...

import { StimulsoftViewerModule } from 'stimulsoft-viewer-angular';

...

	imports: [
		...
		StimulsoftViewerModule,
		...
	],

...

Define reference to StimulsoftViewerComponent:

...

	@ViewChild('viewer') viewer: StimulsoftViewerComponent;
	title = 'ClientApp';
  
...

Then, add Zoom and Current Page buttons:

Zoom is {{ viewer.api.zoom }}<br />
Current page {{ viewer.api.currentPage + 1 }}<br />
<input type="button" (click)="viewer.api.zoom = 50" value="Zoom to 50%" />
<input
  type="button"
  (click)="viewer.api.export('Pdf', { ImageResolution: 200 })"
  value="Export to PDF"
/>

...

Next, define URL template to server controller, initial action and viewer height:

...

<stimulsoft-viewer-angular
	[requestUrl]="'http://localhost:60801/Viewer/{action}'"
	[action]="'InitViewer'"
	[height]="'600px'"
></stimulsoft-viewer-angular>

Then, create ViewerController. Next, initialize the viewer and set email options:

...

[HttpPost]
public IActionResult InitViewer()
{
	var requestParams = StiAngularViewer.GetRequestParams(this);

	var options = new StiAngularViewerOptions();
	options.Actions.GetReport = "GetReport";
	options.Actions.ViewerEvent = "ViewerEvent";
	options.Appearance.ScrollbarsMode = true;

	return StiAngularViewer.ViewerDataResult(requestParams, options);
}

...

After that, get report:

...

[HttpPost]
public IActionResult GetReport()
{
	var report = StiReport.CreateNewReport();
	var path = StiAngularHelper.MapPath(this, $"Reports/MasterDetail.mrt");
	report.Load(path);

	return StiAngularViewer.GetReportResult(this, report);
}

...

Finally, process other viewer requests:

...

[HttpPost]
public IActionResult ViewerEvent()
{
	return StiAngularViewer.ViewerEventResult(this);
}

...

Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen: