1.Integration with Angular 4+

This tutorial will help you to integrate Pivot Table Component with Angular 4+ framework. It is based on angular.io quickstart.

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:

Integrate Flexmonster into existing/new application
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:

If you don’t have Angular CLI app, you can create it by running in the console:
```
ng new PROJECT-NAME
cd PROJECT-NAME
```
Add Flexmonster Angular module by running in the console:
```
npm i ng-flexmonster --save
```
Include flexmonster.js in the index.html. index.html was automatically generated in your app and can be found inside PROJECT-NAME/src folder.
```
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
```

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],
  ...
})

Insert fm-pivot directive where you need the pivot table, for example app.component.html.

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

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

The dependencies are using flexmonster.js from CDN. Another option is to download Flexmonster component and copy flexmonster/ folder to the project.

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

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

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

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. We used this file to add Flexmonster dependency:
```
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
```

1.