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.
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
Install the WebDataRocks Angular wrapper. You can choose between the following wrappers:
Then, download the chosen wrapper from npm:
npm install @webdatarocks/ngx-webdatarocks
npm install @webdatarocks/ng-webdatarocks
Step 3.1. Import the WebDataRocksPivotModule
into 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 { }
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>
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
.
Step 1. Download or clone our sample project from GitHub:
git clone https://github.com/webdatarocks/pivot-angular
cd pivot-angular
Step 2. Install the npm packages described in the package.json
file:
npm install
Step 3. Run your application:
ng serve
The sample project will be available at http://localhost:4200/
.
You can shut down the app with Ctrl + C
.
Note. This sample project uses the Ivy-compatible @webdatarocks/ngx-webdatarocks
wrapper. You can also download another sample project with the @webdatarocks/ng-webdatarocks
wrapper that is not based on Angular Ivy.