Introduction

The Report and Dashboard Viewer is a specialized component for document viewing. It’s fully customizable, fast, and user-friendly, offering a wide range of features. To ensure seamless integration into projects, we provide multiple themes and customization options for both the appearance and functionality of the application.

Getting Started

Open Visual Studio and go to the File menu. Select New, then Project. Next, choose ASP.NET Core Web Application and click Next.

Now, specify the project name, location, and solution name (for example, AngularViewer), then click Create.

Proceed to platform selection: in this example, choose .NET 8 or later. Make sure to disable the Configure for HTTPS option and click Create.

Installing the NuGet Package

The next step is to install the Stimulsoft.Reports.Angular.NetCore NuGet package:

• In the project's context menu, select Manage NuGet Packages;
• Select an element and specify the package version;
• Click Install.

Next, you need to add ViewerController to the Controllers folder by following these steps:

• Open the context menu of the Controllers folder and select Add item;
• Choose Controller... and set the controller type to MVC Controller – Empty;
• Click Add and enter the controller name, e.g., ViewerController;
• Click Add again.

Next, proceed to working with the report: create a Reports folder in the project, create a template, for example MasterDetail.mrt, and insert the following code in ViewerController.cs:

ViewController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.Angular;
using Stimulsoft.Report.Web;

namespace AngularViewer.Controllers
{
    [Controller]
    public class ViewerController : Controller
    {
        static ViewerController()
        {
            // How to Activate
            //Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
            //Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
            //Stimulsoft.Base.StiLicense.LoadFromStream(stream);
        }

        [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);
        }

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

            return StiAngularViewer.GetReportResult(this, report);
        }

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

Additionally, you should configure the .NET server by enabling CORS policy and defining a fallback mechanism for Angular. This should be done in the Program.cs file.

Program.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    });
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseRouting();
app.UseCors();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Use(async (context, next) =>
{
    await next();
    if (context.Response.StatusCode == 404 && !context.Request.Path.Value.StartsWith("/api"))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

app.Run();

Next, open the project folder in File Explorer and install the necessary Angular-client components using npm.

Console

npm install stimulsoft-viewer-angular

Close the console, delete the ClientApp folder, and reopen the console. Enter the following command:

Console

ng new ClientApp

Select the CSS format, press Enter, close the console, and navigate to the ClientApp folder.

Open the console again and install stimulsoft-viewer-angular:

Console

npm install stimulsoft-viewer-angular

Close the console. Open the app.module.ts file in a text editor from the directory "...ClientApp\src\app\" and add StimulsoftViewerModule. Then, insert the following code into app.module.ts:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StimulsoftViewerModule } from 'stimulsoft-viewer-angular';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StimulsoftViewerModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.html file in a text editor from the directory "...ClientApp\src\app\" and add AppComponent. Then, insert the following code into app.component.html:

app.component.html

<stimulsoft-viewer-angular
  [requestUrl]="'http://localhost:5151/Viewer/{action}'"
  [action]="'InitViewer'"
  [height]="'100vh'"
></stimulsoft-viewer-angular>

Go to Visual Studio and run the project. You will see a viewer with the specified report.

In our documentation, you can also find examples of viewer localization, sending reports via email and API methods.