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 6.

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. Every attribute for fm-pivot directive is set either as a string value or as an Angular variable. Here is the list of available attributes:
• componentFolder – URL of the component’s folder which contains all necessary files. Also, it is used as a base URL for report files, localization files, styles and images. The default value for componentFolder is flexmonster/.
• global – object that allows you to preset options for all reports. These options can be overwritten for concrete reports. Object structure is the same as for Report Object.
• width – width of the component on the page (pixels or percent). The default value for width is 100%.
• height – height of the component on the page (pixels or percent). The default value for height is 500.
• report – property to set a report. It can be inline Report Object or URL to report JSON.
• toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
• customizeCell – function that allows customizing of separate cells. Have a look at customizeCell definition and examples.
• licenseKey – the license key.

Please check how all these attributes should be 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>

Please note, string values must be surrounded by singular quotes within the double quotes.

In the above example you can see notice the line

(reportcomplete)="onReportComplete($event)"

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