Menu
Free Trials
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://s3.amazonaws.com/flexmonster/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://s3.amazonaws.com/flexmonster/2.3/'"
          [toolbar]="true"
          [width]="'100%'"
          [height]="500"
          [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
          [report]="'https://s3.amazonaws.com/flexmonster/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 { }