Use SASS stylesheet in Angular with Bold Reports® Angular Report Viewer Component

To use a SASS stylesheet with the Bold Reports® Angular Report Viewer, create an Angular CLI application with SASS styles, install the @boldreports/angular-reporting-components package, and add the Report Viewer component to display an existing SSRS RDL report without a Report Server.

What do I need before using SASS with the Report Viewer in an Angular app?

To use a SASS stylesheet with the Bold Reports® Angular Report Viewer, your development environment needs Node JS and NPM at the versions listed below.

Before you begin, make sure your development environment includes the following:

  • Node JS (version 8.x or 10.x)
  • NPM (v3.x.x or higher)

Install the Angular CLI

To install the Angular CLI globally on your machine, run the following command in the Command Prompt. The Angular CLI tool is the easiest way to set up Angular CLI projects for the Report Viewer.

npm install -g @angular/cli@latest

To learn more about angular-cli commands, see the Angular CLI repository on GitHub.

Create a new application

To create a new Angular application, run the following command in the Command Prompt.

ng new project-name

E.g : ng new reportviewerapp

The ng new command prompts you for information about features to include in the initial application project. Accept the defaults by pressing the Enter or Return key.

Accept the initial application project defaults by pressing the Enter or Return key

Configure Bold Reports® Report Viewer in Angular CLI

The Bold Reports® Angular Report Viewer is distributed in the npm package @boldreports/angular-reporting-components.

  1. To configure the Report Viewer component, change the directory to your application’s root folder.

    cd project-name

E.g : cd reportviewerapp

  2. Run the following commands to install the Bold Reports® Angular library.

    npm install @boldreports/angular-reporting-components --save-dev

  3. Also, install Bold Reports® typings by running the following command.

    npm install --save-dev @boldreports/types

  4. Register the @bold-reports/types under the typeRoots and add the typings jquery and reports.all to the tsconfig.app.json file.

    {
  ...
  ...
  "compilerOptions": {
    ...
    ...
    "typeRoots": [
      "node_modules/@types",
      "node_modules/@boldreports/types"
    ],
    "types": [
      "jquery",
      "reports.all"
    ]
  },
  ...
  ...
}

  5. The Report Viewer requires a window.jQuery object to render the component. Import jQuery in the src/polyfills.ts file as shown in the following code snippet:

    import * as jquery from 'jquery';
window['jQuery'] = jquery;
window['$'] = jquery;

Adding Bold Reports® styles reference

Add the Bold Reports® Angular Report Viewer component style (bold.report-viewer.min.css) as given in the angular.json file within the pojectname -> styles section (Eg. reportviewerapp -> styles).

If you are using an Angular 6 or lower version project, add the changes to the angular-cli.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "reportviewerapp"
  },
  "reportviewerapp": [
    {
      "root": "src",
      "outDir": "dist",
       . . .
       . . .
      "styles": [
        "src/styles.sass",
         "./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css"
      ],
      "scripts": [],
       . . .
       . . .
      }

In the previous code, the material theme is used. To use another theme for your application, follow this syntax: ./node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/[theme-name]/bold.report-viewer.min.css

Adding Report Viewer component

To add the Report Viewer component, refer to the following steps:

  1. Open the app.module.ts file.

  2. Replace the code in the app.module.ts file with the following code snippet:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
import { AppComponent } from './app.component';

// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
// Report viewer
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
    BrowserModule,
    BoldReportViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  3. Open the app.component.html file and initialize the Report Viewer.

  4. Replace the code in the app.component.html file with the following code snippet:

    <bold-reportviewer id="reportViewer_Control" style="width: 100%;height: 950px">
</bold-reportviewer>

  5. Open the app.component.ts and replace the following code example:

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'reportviewerapp';
  public serviceUrl: string;
  public reportPath: string;

    constructor() {
        // Initialize the Report Viewer properties here.
    }
}

    If you get the error 'ej' is not defined after this configuration in Angular CLI version 7, refer to the following code snippet in your application where you have rendered Syncfusion® components (model file) to resolve the issue.

    `/// <reference types="reports.all" />`

Create Web API service

The Report Viewer requires a Web API service to process the report files. You can skip this step and use the online Web API services to preview the already available reports, or create one of the following Web API services:

Adding already created report

If you have created a new service, you can add the reports from the Bold Reports® installation location. For more information, refer to samples and demos section.

  1. Create a folder Resources in your Web API application to store the RDL reports and add already created reports to it.

  2. Add already created reports to the newly created folder.

    In this tutorial, the sales-order-detail.rdl report is used, and you can download the sales order detail report.

Refer to the create RDL report section for creating new reports.

Set report path and Web API service

To set the report path and Web API service for the Angular Report Viewer, open the app.component.ts file and add the following code to the constructor.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'jsreport-sample';
  public serviceUrl: string;
  public reportPath: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = '~/Resources/docs/sales-order-detail.rdl';
    }
}

In the previous code, the sales-order-detail.rdl report and the reportServiceUrl come from the online Web API service.

Open the app.component.html to set reportPath and reportServiceUrl properties of Report Viewer as in the following:

<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [reportPath] = "reportPath" style="width: 100%;height: 950px">
</bold-reportviewer>

Serve the application

To serve the application, follow these steps:

  1. Navigate to the root of the application and run the application using the following command.

    ng serve

  2. Navigate to the appropriate port http://localhost:4200 in the browser.

Rendered Angular Report Viewer

See Also

Render Report Server reports

Create RDLC report

Render RDLC reports

Preview report in print mode

Set data source credential for shared data sources

Change data source connection string

Production deployment