ng-flexmonster

Angular 4+ directive for Flexmonster Pivot component

This repository holds the TypeScript source code for using Flexmonster Pivot in Angular applications.

• Getting started
  • Prerequisites
  • Integrate Flexmonster into existing/new application
  • Run simple Angular and Flexmonster sample from GitHub
• Usage
  • fm-pivot directive and its attributes
  • Using API calls and events
  • Angular Material tabs example
• License
• Support & feedback

Getting Started

You have the following options to start:

• Integrate Flexmonster into existing/new application
• Run simple Angular and Flexmonster sample from GitHub

Prerequisites

Node.js and npm are essential to Angular development.

Get it now if it's not already installed on your machine.

Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.

We recommend nvm for managing multiple versions of node and npm.

Then install the Angular CLI globally:

npm install -g @angular/cli

Integrate Flexmonster into existing/new application

If you don’t have Angular CLI app, you can create it by running in the console:

ng new PROJECT-NAME
cd PROJECT-NAME

Add Flexmonster Angular module by running in the console:

npm i ng-flexmonster --save

Add Flexmonster CSS and JS references to angular.json:

"styles": [ 
	...,
	"node_modules/flexmonster/flexmonster.min.css" 
],
"scripts": [ 
  ...,
  "node_modules/flexmonster/flexmonster.full.js" 
],

Include FlexmonsterPivotModule into app.module.ts. app.module.ts can be found inside PROJECT-NAME/src/app folder.

import { FlexmonsterPivotModule } from 'ng-flexmonster';

@NgModule({
  ...
  imports: [FlexmonsterPivotModule],
  ...
})

Insert fm-pivot directive where you need the pivot table, for example app.component.html.

<fm-pivot 
  [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
  [report]="'https://cdn.flexmonster.com/reports/report.json'">
</fm-pivot>

Run your application from the console:

ng serve

To see the result open your browser on http://localhost:4200/.

Run simple Angular and Flexmonster sample from GitHub

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

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

Install the npm packages described in the package.json:

npm install

Run your application:

ng serve

To see the result open your browser on http://localhost:4200/.

Usage

fm-pivot directive and its attributes

fm-pivot directive embeds the component into the HTML page. Every attribute for fm-pivot directive is set either as a string value or as an Angular variable. Here is the list of available attributes:

• componentFolder – URL of the component’s folder which contains all necessary files. Also, it is used as a base URL for report files, localization files, styles and images. The default value for componentFolder is flexmonster/.
• width – width of the component on the page (pixels or percent). The default value for width is 100%.
• height – height of the component on the page (pixels or percent). The default value for height is 500.
• report – property to set a report. It can be inline Report Object or URL to report JSON.
• toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
• customizeCell – function that allows customizing of separate cells. Have a look at customizeCell definition and examples.
• licenseKey – the license key.

Here is how all these attributes should be specified:

<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'"
          (reportcomplete)="onReportComplete($event)">
    Flexmonster will appear here
</fm-pivot>

Using API calls and events

Check out how setReport() API method is called when handling onReportComplete event in app.component.ts:

onReportComplete(): void {
	this.pivot.flexmonster.off("reportcomplete");
	this.pivot.flexmonster.setReport({
		dataSource: {
			filename: "https://cdn.flexmonster.com/data/data.json"
		}
	});
}

Also, you need to specify that onReportComplete handles reportcomplete event in fm-pivot directive:

(reportcomplete)="onReportComplete($event)

Here is the list of all available API methods and events.

Angular Material tabs example

This sample on GitHub shows how to add Flexmonster to Angular Material tabs.

License

Here is Flexmonster licensing page. We have free 30 day trial!

Flexmonster Angular directive is released as a MIT-licensed (free and open-source) add-on to Flexmonster Pivot.

Support & feedback

Please share your feedback or ask questions via Flexmonster Forum.