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 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 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 ngx-webdatarocks wrapper. You can also download another sample project with the 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:

• ngx-webdatarocks (recommended). For Angular 14 and later, Ivy-compatible.
• ng-webdatarocks. For Angular 5 through 15.

Then, download the chosen wrapper from npm:

npm install @webdatarocks/ngx-webdatarocks

npm install @webdatarocks/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 '@webdatarocks/ngx-webdatarocks';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   WebdatarocksPivotModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

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/.