This tutorial explains how to integrate WebDataRocks reporting tool with Angular 2+ framework in your application.

Prerequisites

  1. You need to have Node.js and npm (installation link).
  2. Install Angular CLI globally by running in the console:
    npm install -g @angular/cli

Choose how to integrate

  1. Integrate WebDataRocks into new or existing application
  2. Clone sample integration project from GitHub

Integrate WebDataRocks into new or existing application

  1. If you don’t have Angular CLI application yet, create it by running in the console:
    ng new PROJECT-NAME
    cd PROJECT-NAME
  2. Download WebDataRocks Angular files from our GitHub and place them in src/app/webdatarocks/ folder.
  3. Open src/index.html file and add WebDataRocks dependencies.
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>WebDataRocks integration with Angular 2+</title>
      <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
      <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
      <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
      <base href="/">
    
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>
    
  4. Import WebDataRocksPivot module in src/app/app.module.ts.
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { WebDataRocksPivot } from "./webdatarocks/webdatarocks.angular4";
    
    
    import { AppComponent } from './app.component';
    
    
    @NgModule({
      declarations: [
        AppComponent, WebDataRocksPivot
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  5. Add wbr-pivot directive to include the pivot table. For example, add this directive to src/app/app.component.html.
    <wbr-pivot #pivot1 [toolbar]="true"
              [width]="'100%'"
              [height]="500"
              [report]="'https://cdn.webdatarocks.com/reports/report.json'">
        WebDataRocks will appear here
    </wbr-pivot>
    
  6. Run your application:
    ng serve
    Your application will run at http://localhost:4200/.

Clone sample integration project from GitHub

  1. Download or clone our sample project from GitHub.
  2. Install npm packages by running in the console:
    npm install
  3. Run your application:
    ng serve
    Your application will run at http://localhost:4200/.