This tutorial will help you to integrate Pivot Table Component with Angular framework. It is based on angular.io quickstart. The integration is fully compatible with the latest Angular 7 or earlier 4+ versions.

Prerequisites

To run a simple application you will need Node.js and npm. Get it now if it’s not already installed on your machine.

Open terminal/console window and verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v.

Then install the Angular CLI globally:

npm install -g @angular/cli

After that, choose one of the following options:

1. Integrate Flexmonster into existing/new application
2. Run simple Angular 4+ and Flexmonster sample from GitHub

Integrate Flexmonster into existing/new application

To integrate Flexmonster into Angular 4+ app please follow the steps:

1. If you don’t have Angular CLI app, you can create it by running in the console:

   ng new PROJECT-NAME
   cd PROJECT-NAME
   

2. Add Flexmonster package and Flexmonster Angular module by running in the console:

   npm i ng-flexmonster --save
   

3. Add CSS and JS references to angular.json:

   "styles": [ 
   	"styles.css", 
   	"/node_modules/flexmonster/flexmonster.min.css" 
   ],
   "scripts": [ "/node_modules/flexmonster/flexmonster.full.js" ],
   

4. Include FlexmonsterPivotModule into app.module.ts. app.module.ts can be found inside PROJECT-NAME/src/app folder.

   import { FlexmonsterPivotModule } from 'ng-flexmonster';
   
   @NgModule({
     ...
     imports: [FlexmonsterPivotModule],
     ...
   })
   

5. Insert fm-pivot directive where you need the pivot table, for example app.component.html. licenseKey is your license or trial key, so you should replace XXXX-XXXX-XXXX-XXXX-XXXX with an actual key. If you don’t have a license key, get a trial key here.

   <fm-pivot 
     [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
     [report]="'https://cdn.flexmonster.com/reports/report.json'">
   </fm-pivot>
   

6. Run your application from the console:

   ng serve
   

   The ng serve command compiles the application and runs it. To see the result open your browser on http://localhost:4200/.

For those who want to integrate with charting libraries, we included all necessary type definitions for integration with Google Charts, FusionCharts, and Highcharts.

Run simple Angular 4+ and Flexmonster sample from GitHub

Download .zip archive with the sample or clone it from GitHub within the following command:

git clone https://github.com/flexmonster/pivot-angular my-proj
cd my-proj

Install the npm packages described in the package.json:

npm install

Open app.component.html and add your license or trial key to the fm-pivot directive. If you don’t have a license key, get a trial key here.

<fm-pivot 
  [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
  [report]="'https://cdn.flexmonster.com/reports/report.json'">
</fm-pivot>

Run your application:

ng serve

The ng serve command compiles the application and runs it. To see the result open your browser on http://localhost:4200/.

The application can be shut down manually with Ctrl-C.

fm-pivot directive and its attributes

fm-pivot directive embeds the component into the HTML page. Each attribute of fm-pivot directive is surrounded by brackets. The value of each attribute must be surrounded by double quotes and can have the following types: string, number, Angular variable available in the current scope, etc. Please note, string values must be surrounded by singular quotes within the double quotes, e.g. [report]="'https://cdn.flexmonster.com/reports/report.json'".

All attributes are equal to those which are passed to the new Flexmonster() API call. Check out the full list of available attributes.

Here is an example demonstrating how different attributes are specified:

<h1>Angular 4+/Flexmonster</h1>
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'"
          [toolbar]="true"
          [width]="'100%'"
          [height]="500"
          [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
          [report]="'https://cdn.flexmonster.com/reports/report.json'"
          (reportcomplete)="onReportComplete($event)">
    Flexmonster will appear here
</fm-pivot>

In the above example you can see notice the following line:

(reportcomplete)="onReportComplete($event)"

In Angular, events are specified in parentheses instead of brackets. This line means that onReportComplete handles reportcomplete event. Any other event can be specified just the same way. Here is the full list of Flexmonster events.

Project structure

Let us take a closer look at the folder structure of the application:
• app/ – folder containing application files:
  • app.module.ts – here we import FlexmonsterPivotModule in order to use it in the Angular application.
  • app.component.html – in this file we embed our pivot table. A special directive <fm-pivot> is used to integrate Flexmonster pivot table with Angular 4+.
  • app.component.ts – we recommend to use Flexmonster API in this file. As an example, you can check how we are handling onReportComplete event and using setReport() API call in app.component.ts from GitHub.
• index.html – the entering point for Angular project.

What’s next?

You may be interested in the following articles:
• How to customize Toolbar
• How to add localization
• How to customize appearance with CSS
• How to define a format for date and time
• How to set specific options common for all reports
• How to configure export