Integration with Angular

This tutorial will help you integrate Flexmonster with Angular.

Flexmonster is fully compatible with the latest Angular 13 as well as the earlier 4+ versions.

Prerequisites

Node.js v4+ and npm v3+
Angular CLI
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

This guide contains the following sections:

Run a simple Angular 5+ and Flexmonster sample from GitHub
Integrate Flexmonster into an Angular 5+ application
See examples of Flexmonster usage in Angular
Integrate Flexmonser into an Angular 4 application
Learn more about the fm-pivot directive and its attributes

Run a simple Angular 5+ and Flexmonster sample from GitHub

Create a sample project with the following CLI command:

flexmonster create angular -r

The flexmonster create angular command does the following:

Downloads the .zip archive with the sample Angular project from GitHub.
Automatically unpacks the files in the current folder — as a result, the flexmonster-angular-project/ folder will appear in your working directory.

The -r option, which is short for --run, completes the following tasks:

Installs all the npm dependencies described in package.json.
Compiles the application and runs it in the browser.

The application can be shut down manually with Ctrl + C.

Integrate Flexmonster into an Angular 5+ application

To integrate Flexmonster into an Angular 5+ app, follow the steps below:

Step 1. If you don’t have an Angular app, you can create one by running the following commands in the console:

ng new PROJECT-NAME 
cd PROJECT-NAME

Step 2. Install the Flexmonster Angular module by running the following CLI command from the folder containing package.json:

flexmonster add ng-flexmonster

The add command installs the ng-flexmonster package to the node_modules/ folder and adds it as an npm dependency to package.json.

Step 3. Import FlexmonsterPivotModule into src/app/app.module.ts:

import { FlexmonsterPivotModule } from 'ng-flexmonster';

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

Step 4. Import the CSS styles (e.g., in styles.css):

@import "flexmonster/flexmonster.min.css"

Step 5. Import the flexmonster and ng-flexmonster TypeScript modules (e.g., in app.component.ts):

import * as Flexmonster from 'flexmonster';
import { FlexmonsterPivot } from 'ng-flexmonster';

Step 6. Insert the fm-pivot directive where you need the pivot table (e.g., in app.component.html):

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

This step mentions only some of the fm-pivot attributes. These attributes are equivalent to Flexmonster’s initialization parameters. See the full list of available parameters.

Step 7. Run your application from the console:

ng serve

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

Examples of Flexmonster usage in Angular

Our sample Angular project contains the following usage examples:

Creating the pivot table
Handling events
Using API calls
Updating data
Customizing the Toolbar
Customizing the grid
Integrating with Highcharts
Integrating with amCharts

Learn more about each of these examples in our guide: Flexmonster usage in Angular.

Integrate Flexmonser into an Angular 4 application

To integrate Flexmonster into an Angular 4 project, we recommend using the FlexmonsterPivot module from GitHub. This module is also available on npm, but due to restrictions on metadata files, it can only be used with Angular 5+ versions.

Follow the steps below:

Step 1. If needed, uninstall the ng-flexmonster npm module:

npm uninstall ng-flexmonster

Step 2. Download the FlexmonsterPivot source code from GitHub and move it to the src/app/ folder.

Step 3. Install the flexmonster npm module:

npm install flexmonster

Step 4. In the app.component.ts file, import FlexmonsterPivot:

import { FlexmonsterPivot } from './flexmonster.component';

Step 5. In the app.module.ts file, declare the FlexmonsterPivot module:

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

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

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

Step 6. Import Flexmonster styles in the src/styles.css file:

@import "../node_modules/flexmonster/flexmonster.min.css";

After completing these steps, you can use Flexmonster in your Angular 4 application.

The fm-pivot directive and its attributes

The fm-pivot directive embeds the component into the HTML page. Each attribute name of the fm-pivot directive must be surrounded by square brackets. Each attribute value can have any type, including an Angular variable available in the current scope, but it must be surrounded by double quotes.

String values must be surrounded by single quotes within double quotes, e.g., [report]="'https://cdn.flexmonster.com/reports/report.json'".

All attributes are equivalent to those which are passed to the new Flexmonster() API call. Check out the full list of available attributes.

Here is an example demonstrating how different attributes can be specified:

<h1>Angular 4+/Flexmonster</h1>
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'"
          [toolbar]="true"
          [width]="'100%'"
          [height]="500"
          [report]="'https://cdn.flexmonster.com/reports/report.json'"
          (reportcomplete)="onReportComplete()">
    Flexmonster will appear here
</fm-pivot>

In the above example, notice the following line:

(reportcomplete)="onReportComplete()"

In Angular, events are specified in round brackets instead of square brackets. The above example shows how the onReportComplete function handles the reportcomplete event. Any other event handling can be specified in the same way. Here is the full list of Flexmonster events.

What’s next?

You may be interested in the following articles: