Search results

Getting Started with Syncfusion Report Designer using Angular CLI

Refer to the following steps to render Syncfusion Report Designer in your Angular application.

Prerequisites

Before getting started with Syncfusion Angular Report Designer, 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

Angular provides the easiest way to set Angular CLI projects using Angular CLI tool. To install the CLI application globally to your machine, run the following command in Command Prompt.

npm install -g @angular/cli

To learn more about angular-cli commands refer here

Create a new application

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

```typescript

ng new project-name

E.g : ng new reportdesignerapp

```

The ng new command prompts you for information about features to include in the initial app project. Add the Angular Routing to your angular application by entering y in the prompt window then press Enter key. Now, choose the CSS stylesheet format using the arrow keys and then press Enter key. The Angular CLI installs the required Angular npm packages and other dependencies.

Configure Syncfusion Report Designer in Angular CLI

Syncfusion Reporting packages are distributed in npm as @syncfusion/reporting-angular.

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

    cd project-name
    
    E.g : cd reportdesignerapp
  2. Run the below commands, to install the internal dependencies.

    npm install @syncfusion/reporting-angular --save
  3. Install the typings dependencies jquery and ej.web.all using below commands.

    npm install --save-dev @types/jquery
    npm install --save-dev @types/ej.web.all
  4. Add the typings jquery and ej.web.all under types node in src/tsconfig.app.json file.

    {
      "extends": "../tsconfig.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": [
          "jquery",
          "ej.web.all"
        ]
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }
  5. Report Designer requires window.jQuery object to render the component. Import jQuery in src/polyfills.ts file as in the following code snippet.

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

Refer the already configured import codes in our webpack angular seed application.

Adding CSS reference

  1. Open the angular.json file from your application’s root directory.

  2. Refer the Report Designer component style scripts ej.reports.all.min.css and ej.reportdesigner.min.css under the styles node of projects section as in the below code example.

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

    Css script reference

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "reportdesignerapp": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/reportdesignerapp",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.css",
                  "./node_modules/@syncfusion/reporting-javascript/Content/reports/default-theme/ej.reports.all.min.css",
                  "./node_modules/@syncfusion/reporting-javascript/Content/reports/default-theme/ej.reportdesigner.min.css"
                ],
                "scripts": [],
                "es5BrowserSupport": true
              },
          . . .
          . . .
          }

    In the above code snippet the default-theme theme is used. You can modify the theme based on your application, refer the following syntax: ./node_modules/@syncfusion/reporting-javascript/Content/reports/[theme-name]/ej.reports.all.min.css and ./node_modules/@syncfusion/reporting-javascript/Content/reports/[theme-name]/ej.reportdesigner.min.css

Adding Report Designer component

To add the Report Designer component refer the following steps:

  1. Open the src/app/app.module.ts file.

  2. Import EJ_REPORTDESIGNER_COMPONENTS from @syncfusion/reporting-angular/src/ej/reportdesigner.component package as in the below code snippet.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { EJ_REPORTDESIGNER_COMPONENTS } from '@syncfusion/reporting-angular/src/ej/reportdesigner.component';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        EJ_REPORTDESIGNER_COMPONENTS
      ],
    imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  3. Open the src/app/app.component.html file and initialize the Report Designer.

  4. You can replace the following code snippet in the app.component.html file.

    <ej-reportdesigner id="designer" style="width: 100%;height: 950px">
    </ej-reportdesigner>
  5. Open the src/app/app.component.ts and replace the below code example.

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'reportdesignerapp';
      public serviceUrl: string;
    
        constructor() {
            // Initialize the Report Designer properties here.
        }
    }

    If you have faced the issue 'ej' is not defined after the above configuration in Angular CLI latest version 7, Please refer the below code snippet in your application where you have rendered Syncfusion Components(model file) to resolve the issue.

    `/// <reference types="ej.web.all" />`

Create Web API service

The Report Designer requires a Web API service to process the data and file actions. You can skip this step and use our online Web API services to create, edit, and browse reports or you must create any one of the following Web API service.

Set Web API service URL

To set Web API service, open the app.component.ts file and add the code snippet as in the constructor.

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

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

    constructor() {
        this.serviceUrl = "https://reports.syncfusion.com/demos/services/api/ReportingAPI";
    }
}

Open the app.component.html to set ServiceUrl property of Report Designer as in the following code snippet.

<ej-reportdesigner id="designer" [serviceUrl] = "serviceUrl" style="width: 100%;height: 950px">
</ej-reportdesigner>

Serve the application

  1. Go to the workspace folder (reportdesignerapp).

  2. Launch the server by using the CLI command ng serve, with the —open option.

    ng serve --open
  3. The ng serve --open command launches the server and the --open option automatically opens your browser to http://localhost:4200/ report designer output

See Also

Production deployment