1.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.

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-angularjs4 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 us take a closer look at the folder structure of this application:

• app/ – folder containing application files:
  • app.module.ts – here we import FlexmonsterPivot module in order to use it in the Angular 4 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, we are handling ready event.
  • flexmonster.angular4.d.ts – declares FlexmonsterPivot module.
  • flexmonster.d.ts – TypeScript definitions for Flexmonster.
  • flexmonster.angular4.ts – the code of <fm-pivot> directive.
• index.html – the entering point for Angular 4 project. We used this file to add Flexmonster and jQuery dependencies:

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdn.flexmonster.com/2.3/flexmonster.js"></script>
  

The dependencies are using flexmonster.js and jquery.js from CDN. Another option is to download Flexmonster component and copy flexmonster/ folder to the project.

Please have a look at the content of the key files:

<h1>AngularJS 4/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>

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

@Component({
    selector: 'my-app',
    templateUrl: './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.angular4";

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