Menu
Download Free Trial
  1. API reference
  2. Welcome
    1. Component overview
    2. Quickstart
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to database with .NET
      4. Connecting to database with .NET Core
      5. Connecting to database with Java
      6. Connecting to database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Accelerator
      3. Installing Accelerator as a Windows Service
      4. Referring Accelerator as a DLL
      5. Configuring authentication process
      6. Configuring 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. 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
  5. Integration with frameworks
    1. Available tutorials
    2. Integration with jQuery
    3. Integration with AngularJS
    4. Integration with Angular 2
    5. Integration with Angular 4+
    6. Integration with React
    7. Integration with Webpack
    8. Integration with RequireJS
    9. Integration with TypeScript
    10. Integration with ASP.NET
    11. Integration with JSP
    12. Integration with PhoneGap
  6. Integration with charts
    1. Integration with Highcharts
    2. Integration with FusionCharts
    3. Integration with Google Charts
    4. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Localizing component
  8. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.4 to 2.5
    4. Migration guide from 2.3 to 2.4
    5. Migration guide from 2.2 to 2.3
  9. Older Versions
    1. Documentation 2.3
    2. Documentation 2.2
    3. API reference - Flex
Table of contents

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:

  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 Angular module by running in the console:
    npm i ng-flexmonster --save
    
  3. 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>
    
  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.
    <fm-pivot 
      [componentFolder]="'https://cdn.flexmonster.com/'"
      [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/.
    1. 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 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. We used this file to add Flexmonster dependency:
    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>