This tutorial explains how to integrate the WebDataRocks reporting tool with the Angular 5+ framework.

Prerequisites

  1. Node.js and npm (installation link).
  2. Angular CLI. Install it globally from the console: 
    npm install -g @angular/cli

Now choose how to integrate:

  1. Clone a sample Angular 5+ integration project from GitHub
  2. Integrate WebDataRocks into an Angular 5+ application

Clone a sample Angular 5+ integration project from GitHub

Step 1. Download or clone our sample project from GitHub:

git clone https://github.com/WebDataRocks/pivot-angular
cd pivot-angular

Step 2. Install npm packages by running npm install in the console.

Step 3. Run your application:

ng serve

The sample project will be available at http://localhost:4200/.

Integrate WebDataRocks into an Angular 5+ application

Step 1. If you don’t have an Angular CLI application yet, create one by running this command in the console:

ng new PROJECT-NAME
cd PROJECT-NAME

Step 2. Download the WebDataRocks Angular module from npm:

npm install ng-webdatarocks

Step 3. Import the WebDataRocksPivotModule in src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { WebdatarocksPivotModule } from 'ng-webdatarocks';

import { AppComponent } from './app.component';

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

Step 4. Add WebDataRocks’ styles to the src/styles.css file:

@import 'webdatarocks/webdatarocks.min.css'

Step 5. Open src/app/app.component.html and add WebDataRocks there using the app-wbr-pivot directive:

<app-wbr-pivot 
 [toolbar]="true"
 [width]="'100%'"
 [height]="500"
 [report]="'https://cdn.webdatarocks.com/reports/report.json'">
   WebDataRocks will appear here
</app-wbr-pivot>

Step 6. Run your application:

ng serve --open

Your application will be available at http://localhost:4200/.