ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Preview Reports / JavaScript / Integration to Angular Application
In This Topic
    Integration to Angular Application
    In This Topic

    This page explains how you can embed the JSViewer 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. Create an ASP.NET Core Angular project and configure ActiveReports in ASP.NET Core Middleware as illustrated in JSViewer ASP.NET Core Middleware topic.
      Now configure the client application for Angular application as illustrated in the next steps.

    2. Expand the ClientApp folder.

    3. Open 'package.json' file and add the following package for JSViewer under 'dependencies':
      "@grapecity/ar-viewer": "latest",

    4. Open 'angular.json' file and add the following references to JSViewer's css and js.

      angular.json
      Copy Code
      "styles": ["./node_modules/@grapecity/ar-viewer/dist/jsViewer.min.css"],
      "scripts": [ "./node_modules/@grapecity/ar-viewer/dist/jsViewer.min.js" ]
      
    5. Expand the app folder inside the ClientApp\src folder.  

    6. Open 'app.component.ts' file and replace the existing code with the following code to initialize the JSViewer instance. Also, we will add the mock declaration in this file since it uses the JSViewer component:

      app.component.ts
      Copy Code
      import { Component } from '@angular/core';
      declare var GrapeCity: any;
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
      })
      export class AppComponent {
        title = "app";
        viewer: any;
        ngAfterViewInit() {
          this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-host',  
          });
          this.viewer.openReport("DemoReport.rdlx");
        }
      }
      
    7. 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="viewer-host"></div>
      </body>
      
    8. Open 'styles.css' inside the ClientApp\src folder and add the following css.

      styles.css
      Copy Code
      #viewer-host {
        width: 100%;
        height: 100vh;
      }
      
    9.  Open 'main.ts' inside the  ClientApp\src folder and add the { ngZone: "noop" } as the second argument inside the bootstrapModule method. It should look below.

      platformBrowserDynamic(providers).bootstrapModule(AppModule, { ngZone: "noop" })
      .catch(err => console.log(err));
    10. Open ClientApp folder in the command prompt or terminal window and run the command npm install to install the npm packages.

    11. Run the application by pressing F5.