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.
npm install -g @angular/cli
Now choose how to integrate:
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.
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:
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/
.