This tutorial explains how to integrate the WebDataRocks reporting tool with the Angular 4+ framework in your application.

Prerequisites

  1. You need to have Node.js and npm (installation link).
  2. Install Angular CLI globally by running in the console:
    npm install -g @angular/cli

Choose how to integrate

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

Clone a sample integration project from GitHub

Step 1. Download or clone our sample project from GitHub.

Step 2. Install npm packages by running this command in the console:

npm install

Step 3. Run your application:

ng serve

Your application will run at http://localhost:4200/.

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. Download WebDataRocks Angular files from our GitHub and place them in src/app/webdatarocks/ folder.

Step 3. Open the src/index.html file and add WebDataRocks dependencies:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebDataRocks integration with Angular 4+</title>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

Step 4. Import WebDataRocksPivot module in src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { WebDataRocksPivot } from "./webdatarocks/webdatarocks.angular4";

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

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

Step 5. Add the wbr-pivot directive to include the pivot table. For example, add this directive to src/app/app.component.html:

<wbr-pivot #pivot1 [toolbar]="true"
[width]="'100%'"
[height]="500"
[report]="'https://cdn.webdatarocks.com/reports/report.json'">
WebDataRocks will appear here
</wbr-pivot>

Step 6. Run your application:

ng serve

Your application will run at http://localhost:4200/.