Documentation menu

Integration with Angular

This tutorial explains how to integrate the WebDataRocks reporting tool with the Angular framework. WebDataRocks works with Angular versions 5 or later and is Ivy-compatible.

Prerequisites

  1. Node.js
  2. Angular CLI

Now choose how to integrate:

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

Clone a sample Angular 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/.

Note. This sample project uses the Ivy-compatible @webdatarocks/ngx-webdatarocks wrapper. You can also download another sample project with the @webdatarocks/ng-webdatarocks wrapper that is not based on Angular Ivy.

Integrate WebDataRocks into an Angular 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. Install the WebDataRocks Angular wrapper. You can choose between the following wrappers:

Then, download the chosen wrapper from npm:

ngx-webdatarocks

npm install @webdatarocks/ngx-webdatarocks

ng-webdatarocks

npm install @webdatarocks/ng-webdatarocks

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

ngx-webdatarocks

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

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

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

ng-webdatarocks

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { WebdatarocksPivotModule } from '@webdatarocks/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/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/.