Integrating the Dashboards Viewer into Standalone Angular Component
Our sample projects and report templates can help you learn the basics of working with our products.The dashboard viewer can be dropped into a standalone Angular component — the same ASP.NET Core controller serves it, no NgModule required.
Serve the viewer from the controller.
How it works. A standalone Angular component hosts the
Serve the viewer from the controller.
[HttpPost]
public IActionResult InitViewer()
{
var requestParams = StiAngularViewer.GetRequestParams(this);
var options = new StiAngularViewerOptions();
options.Actions.GetReport = "GetReport";
options.Actions.ViewerEvent = "ViewerEvent";
return StiAngularViewer.ViewerDataResult(requestParams, options);
}
public IActionResult GetReport()
{
var report = StiReport.CreateNewReport();
report.Load(StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt"));
return StiAngularViewer.GetReportResult(this, report);
}- The backend is identical to the module-based integration; only the Angular side differs — a standalone component imports the viewer directly.
StiAngularVieweractionsInitViewer/GetReport/ViewerEventback the standalone component.
How it works. A standalone Angular component hosts the
sti-viewer and calls these actions, so the viewer integrates without a shared NgModule.