Menu
Download Free Trial
  1. API reference
  2. Welcome
    1. Getting started
    2. Quickstart
    3. System requirements
    4. Typical errors
    5. Installation troubleshooting
  3. Connecting to Data Source
    1. JSON
      1. JSON data source
      2. Data types in JSON
    2. CSV
      1. CSV data source
      2. Data types in CSV
    3. SQL database
      1. Connecting to SQL database
      2. Connecting to database with .NET
      3. Connecting to database with .NET Core
      4. Connecting to database with Java
      5. 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. Configuring username/password protection
      5. Configuring secure HTTPS connection
      6. 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. Configuring 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. Calculated values
    10. Custom sorting
    11. Date and time formatting
    12. Configuring global options
  5. Integration with frameworks
    1. Integration with frameworks
    2. Integration with AngularJS
    3. Integration with Angular 2
    4. Integration with Angular 4
    5. Integration with React
    6. Integration with RequireJS
    7. Integration with TypeScript
    8. Integration with ASP.NET
    9. Integration with JSP
    10. Integration with PhoneGap
  6. Integration with charts
    1. Integration with charts
    2. Integration with Highcharts
    3. Integration with FusionCharts
    4. Integration with Google Charts
    5. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Localizing component
  8. Export and print
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.3 to 2.4
    4. Migration guide from 2.2 to 2.3
  10. Managing license keys
  11. Older Versions
    1. Documentation 2.3
    2. Documentation 2.2
    3. API reference - Flex
Table of contents

Integration with Angular 2

This tutorial will help you to integrate Pivot Table Component with Angular 2 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.

Create a new project based on this sample

Download .zip archive with the sample or clone it from GitHub within the following command:

git clone https://github.com/flexmonster/pivot-angularjs2 my-proj
cd my-proj

Install npm packages

Install the npm packages described in the package.json and verify that it works:

npm install
npm start

The npm start command first compiles the application, then simultaneously recompiles and runs the lite-server. Both the compiler and the server watch for file changes.

Shut it down manually with Ctrl-C.

You’re ready to write your application.

Project structure

Let’s overview the sample folder structure:

  • app/ – folder that contains application files:
    • app.module.ts – the file imports FlexmonsterPivot module for further usage in Angular 2 application.
    • app.component.html – main component view, here we insert the instance of the pivot table. It uses <fm-pivot> directive which was made to integrate Flexmonster with Angular 2.
    • app.component.ts – main component code, recommended place to use Flexmonster API. Inside our sample project we show how to handle ready event.
    • flexmonster.angular2.d.ts – declares FlexmonsterPivot module.
    • flexmonster.d.ts – TypeScript definitions for Flexmonster.
    • flexmonster.angular2.ts – the code of <fm-pivot> directive.
  • index.html – the starting point for Angular 2 project. In this file we add Flexmonster dependency the following way:
    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
    

In our sample, we are loading flexmonster.js from CDN. You can also download all Flexmonster files and copy flexmonster/ folder to your project.

Please find contents of key files below.

app.component.html

<h1>AngularJS 2/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'"
          (ready)="onPivotReady($event)">
    Flexmonster will appear here
</fm-pivot>

app.component.ts

import { Component } from '@angular/core';
import { FlexmonsterPivot } from "./flexmonster.angular2";

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html'
})
export class AppComponent {
    onPivotReady(pivot: Flexmonster.Pivot): void {
        console.log("[ready] FlexmonsterPivot");
    }
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { FlexmonsterPivot } from "./flexmonster.angular2";

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, FlexmonsterPivot ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }