1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using the Data Compressor
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using the Data Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to a database with Node.js
      4. Connecting to a database with .NET
      5. Connecting to a database with .NET Core
      6. Connecting to a database with Java
      7. Connecting to a database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows Service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with Accelerator
      3. Configuring Mondrian roles
      4. Сonfiguring username/password protection
      5. Сonfiguring secure HTTPS connection
      6. Troubleshooting
    6. icCube
  4. Security
    1. Accelerator security
    2. Data Compressor Security
  5. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set report to the component
    8. Get report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  7. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  8. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.5 to 2.6
    4. Migration guide from 2.4 to 2.5
    5. Migration guide from 2.3 to 2.4
    6. Migration guide from 2.2 to 2.3
    7. Documentation for older versions
Table of contents

Integration with Angular

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?