Documentation menu

Integrating WebDataRocks

This tutorial shows how to integrate the WebDataRocks reporting tool with the Angular framework. WebDataRocks supports recent Angular versions as well as earlier ones.

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.

Troubleshooting

If you run into any issues during the integration, please create an issue on our GitHub.

See also