This tutorial explains how to integrate the WebDataRocks reporting tool with the Angular 5+ framework.
Prerequisites
- Node.js and npm (installation link).
- Angular CLI. Install it globally from the console:
npm install -g @angular/cli
Now choose how to integrate:
- Clone a sample Angular 5+ integration project from GitHub
- 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/
.