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 --ssr=false
cd PROJECT-NAME

Step 2. Get WebDataRocks

Install the WebDataRocks Angular wrapper from npm:

npm install @webdatarocks/ngx-webdatarocks

This wrapper is Ivy-compatible and works only for Angular 14 and later. To integrate WebDataRocks with Angular 5 through 15, install the @webdatarocks/ng-webdatarocks wrapper.

Step 3. Include WebDataRocks

Step 3.1. Import the WebDataRocksPivotModule into the component where you need the pivot table (e.g., src/app/app.component.ts):

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css"
})
export class AppComponent {
  // ...
}

If you are using NgModules, import the WebdatarocksPivotModule into your NgModule (e.g., src/app/app.module.ts):

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
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 { }

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 tag:

<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