Documentation menu
JS React Angular Vue
JS React Angular Vue

Integrating WebDataRocks

This tutorial shows how to integrate the WebDataRocks reporting tool with the Angular framework. WebDataRocks wrapper is Ivy-compatible and works with Angular 5 or later.

You can also run our sample project from GitHub.

Prerequisites

Step 1. Create a project (optional)

If you don’t have an Angular application yet, create one by running the following commands in the console:

ng new PROJECT-NAME --standalone=false
cd PROJECT-NAME

Step 2. Get WebDataRocks

Install the WebDataRocks Angular wrapper. You can choose between the following wrappers:

Then, download the chosen wrapper from npm:

ngx-webdatarocks

npm install @webdatarocks/ngx-webdatarocks

ng-webdatarocks

npm install @webdatarocks/ng-webdatarocks

Step 3. Include WebDataRocks

Step 3.1. Import the WebDataRocksPivotModule into src/app/app.module.ts:

ngx-webdatarocks

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { WebdatarocksPivotModule } from '@webdatarocks/ngx-webdatarocks';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

ng-webdatarocks

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 3.2. Add WebDataRocks styles to the src/styles.css file:

@import '@webdatarocks/webdatarocks/webdatarocks.min.css';

Step 3.3. Open src/app/app.component.html and add WebDataRocks there using the app-wbr-pivot directive:

<app-wbr-pivot 
 [toolbar]="true">
</app-wbr-pivot>

Step 4. See the result

Run your application:

ng serve --open

Open http://localhost:4200/ in the browser — WebDataRocks is embedded into your Angular project.

You can shut down the app with Ctrl + C.

See also