Documentation menu
JS logo React logo Angular logo Vue logo
Current framework logo
JS logo React logo Angular logo Vue logo

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