ActiveReports 18 .NET Edition
Developers / Create Applications / WebDesigner Application / Integration to Angular Application
In This Topic
    Integration to Angular Application
    In This Topic

    This page explains how you can embed the ActiveReports WebDesigner component in your Angular application. To run the Angular Application Server, you will require the node.js JavaScript runtime and Angular CLI. Use the following command in the terminal or command prompt to install the Angular CLI:

    npm install -g @angular/cli

    1. Open Microsoft Visual Studio 2022 and create a new Angular and ASP.NET Core project.

      Create a New Project Dialog

    2. Type a name for your project and click Next.

      Configure your New Project Dialog

    3. Select the Framework to a latest version and uncheck other options.
            

      Create a New Project Dialog

    4. Right-click the '.Server' project in the Solution Explorer and select Manage NuGet Packages.

    5. Add the following packages to the project.

      MESCIUS.ActiveReports.Aspnetcore.Designer
      MESCIUS.ActiveReports.Aspnetcore.Viewer

    6. Create 'resources' folder in your sample project root; you can put your existing reports, themes, and images in this folder.

    7. Make sure to set the Build Action property of the resources to 'Embedded Resource'.

    8. Open 'Program.cs' file and update the file to include the 'using' statements at the top, and specify the resource folder and add services to container, so that the complete file looks like below.

      Program.cs
      Copy Code 
      using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using GrapeCity.ActiveReports.Web.Designer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
builder.Services.AddReportViewer();
builder.Services.AddReportDesigner();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
// Configure the HTTP request pipeline.
app.UseHttpsRedirection();
app.UseAuthorization();
var ResourcesRootDirectory =
    new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
app.UseReportDesigner(config => config.UseFileStore(ResourcesRootDirectory, null, FileStoreOptions.NestedFoldersLookup));

app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();

    9. In the '.client' project, open 'package.json' file and add the following packages under 'dependencies':

      "@mescius/activereportsnet-designer": "^18.x.x",
      "@mescius/activereportsnet-viewer": "^18.x.x"        

    10. Open the '.client' project in the command prompt or terminal window and run the following command to install the npm packages. 
      npm install

      The designer and viewer files/folders will be downloaded in your current directory: .\node_modules\@mescius\activereportsnet-designer\dist and .\node_modules\@mescius\activereportsnet-viewer\dist.
    11. Expand the 'src\app' folder in the '.client' project, open 'app.component.ts' file, and replace the existing code with the following code to initialize the Designer instance.
      app.component.ts
      Copy Code 
      import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { arWebDesigner } from '@mescius/activereportsnet-designer';
import { JSViewer, createViewer } from '@mescius/activereportsnet-viewer';
import '@mescius/activereportsnet-designer/dist/web-designer.css';
import '@mescius/activereportsnet-viewer/dist/jsViewer.min.css';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  forecasts: any;
  private viewer: JSViewer | null = null;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    arWebDesigner.create('#ar-web-designer', {
      rpx: { enabled: true },
      appBar: { openButton: { visible: true } },
      data: { dataSets: { visible: true, canModify: true }, dataSources: { canModify: true } },
      preview: {
        openViewer: (options: any) => {
          if (this.viewer) {
            this.viewer.openReport(options.documentInfo.id);
            return;
          }
          this.viewer = createViewer({
            element: '#' + options.element,
            reportService: {
              url: 'api/reporting',
            },
            reportID: options.documentInfo.id
          });
        }
      }
    });
  }
  ngOnDestroy() {
    this.viewer?.destroy();
    arWebDesigner.destroy('#ar-web-designer');
  }
  title = 'webdesigner_angular.client';
}

    12. Open the 'app.component.html' file and replace the existing content with the following markup for hosting the element.

      app.component.html
      Copy Code 
      <body>
  <div id="ar-web-designer" class="ar-web-designer">
    <span class="ar-web-designer__loader"><b>AR WebDesigner</b></span>
  </div>
</body>
    13. Open the 'app.component.css' file and modify its content as follows.
      app.component.css
      Copy Code 
      @keyframes arwd-loader {
  from {
    color: #fff
  }
  to {
    color: #205f78
  }
}
.ar-web-designer {
  width: 100%;
  height: 100%
}
.ar-web-designer__loader {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #205f78;
  color: #fff;
  font-size: 18px;
  animation-name: arwd-loader;
  animation-duration: .62s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  justify-content: center;
  align-items: center
}
    14. Open the '\src\styles.css' file and add the following content.
      styles.css
      Copy Code 
      body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0
}

    15. Open 'proxy.conf.js' file and update the 'context' section of code as follows.

      proxy.conf.js
      Copy Code 
      context: [
      "/weatherforecast",
      "/api"
   ],

    16.  Press Ctrl + Shift + B to build your application and then press F5 to run it.
      On running the application, you can find the report placed in the resource folder by navigating to File menu > Open.