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 the Accelerator
      3. Configuring Mondrian roles
      4. Сonfiguring username/password protection
      5. Сonfiguring a secure HTTPS connection
      6. Troubleshooting
    6. icCube
  4. Security
    1. Security in Flexmonster
    2. Security aspects when connecting to an OLAP cube
      1. The data transfer process
      2. Data security
      3. Data access management
    3. Security aspects when connecting to a database
      1. The data transfer process
      2. Data access management
  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 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?