WebDataRocks End User License Agreement (“Agreement”) has been revised and is effective as of April 18, 2024.
The following modifications have been made:
The modified version of WebDataRocks End User License Agreement is available here.
Downloading, installing, and/or continuing to use WebDataRocks after April 18, 2024, constitutes your acceptance of the terms and conditions of the modified version of WebDataRocks End User License Agreement. If you do not agree to any of these terms and conditions, do not download, install, use, or access (or continue to access) WebDataRocks.
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.
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 @webdatarocks/ngx-webdatarocks
wrapper. You can also download another sample project with the @webdatarocks/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/
.