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 theindex.html
.index.html
was automatically generated in your app and can be found insidePROJECT-NAME/src
folder.<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
- Include
FlexmonsterPivotModule
intoapp.module.ts
.app.module.ts
can be found insidePROJECT-NAME/src/app
folder.import { FlexmonsterPivotModule } from 'ng-flexmonster'; @NgModule({ ... imports: [FlexmonsterPivotModule], ... })
- Insert
fm-pivot
directive where you need the pivot table, for exampleapp.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
Theng serve
command compiles the application and runs it. To see the result open your browser onhttp://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
-
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 isflexmonster/
. -
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 is100%
. -
height
– height of the component on the page (pixels or percent). The default value for height is500
. -
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 isfalse
– without the toolbar. -
customizeCell
– function that allows customizing of separate cells. Have a look at customizeCell definition and examples. -
licenseKey
– the license key.
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: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 handlingonReportComplete
event and usingsetReport()
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>