Menu
Download Free Trial
  1. Getting started
    1. Quickstart
    2. System requirements
    3. Managing license keys
    4. Updating to the latest version
    5. Typical errors
    6. Migration guide
    7. Installation troubleshooting
  2. JSON data source
    1. Data types in JSON
  3. CSV data source
    1. Data types in CSV
  4. Connecting to SQL database
    1. Connecting to database with .NET
    2. Connecting to Relational Database with .NET Core
    3. Connecting to database with Java
    4. Connecting to database with PHP
  5. Connecting to Microsoft Analysis Services
    1. Getting started with Accelerator
    2. Installing Accelerator as a Windows Service
    3. Configuring username/password protection
    4. Configuring secure HTTPS connection
    5. Troubleshooting
  6. Connecting to Pentaho Mondrian
    1. Getting started with Accelerator
    2. Configuring Mondrian roles
    3. Сonfiguring username/password protection
    4. Сonfiguring secure HTTPS connection
    5. Troubleshooting
  7. Connecting to icCube
  8. Configuring report
    1. Data source
    2. Slice
    3. Options
    4. Number formatting
    5. Conditional formatting
    6. Set report to the component
    7. Get report from the component
    8. Date and time formatting
    9. Calculated values
    10. Custom sorting
  9. Integration
    1. Integration with AngularJS
    2. Integration with Angular 2
    3. Integration with Angular 4
    4. Integration with React
    5. Integration with RequireJS
    6. Integration with TypeScript
    7. Integration with ASP.NET
    8. Integration with JSP
    9. Integration with PhoneGap
  10. Integration with charts
    1. Integration with Highcharts
    2. Integration with FusionCharts
    3. Integration with Google Charts
    4. Integration with any charting library
  11. Customizing toolbar
  12. Customizing appearance
  13. Localizing component
  14. Global Object
  15. Export and print
  16. API reference - JavaScript
  17. 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 and jQuery dependencies the following way:
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.flexmonster.com/2.3/flexmonster.js"></script>
    

In our sample, we are loading flexmonster.js and jquery.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/2.3/'"
          [toolbar]="true"
          [width]="'100%'"
          [height]="500"
          [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
          [report]="'https://cdn.flexmonster.com/2.3/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 { }