Download Free Trial
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 quickstart.


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 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=""></script>
    <script src=""></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.


<h1>AngularJS 2/Flexmonster</h1>
<fm-pivot [componentFolder]="''"
    Flexmonster will appear here


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

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


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

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

  imports:      [ BrowserModule ],
  declarations: [ AppComponent, FlexmonsterPivot ],
  bootstrap:    [ AppComponent ]
export class AppModule { }