Integration with Angular

This tutorial will help you integrate Flexmonster with Angular.

Our component is compatible with the latest Angular 16 as well as earlier versions.

To test Flexmonster in a ready-to-use Angular application, use our sample project.

Prerequisites

• Node.js
• Angular CLI
• Flexmonster CLI
  Install it with the following command:

  npm install -g flexmonster-cli

Note Node.js and Angular versions must be compatible. Check out the version compatibility guide.

Step 1. (optional) Create an Angular application

Skip this step if you already have an Angular app.

Сreate an Angular app by running the following command in the console:

ng new flexmonster-project && cd flexmonster-project

Step 2. Get Flexmonster

There are two Flexmonster wrappers for Angular:

• ngx-flexmonster (works for Angular 14 and later, Ivy-compatible)
• ng-flexmonster (works for Angular 5 through 15)

Run one of the following commands inside your project to get the chosen wrapper. If your Angular version is compatible with both wrappers, we recommend choosing the ngx-flexmonster:

flexmonster add ngx-flexmonster

flexmonster add ng-flexmonster

Note If you are using Angular 4, see Integration with Angular 4.

Step 3. Embed Flexmonster

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

import { FlexmonsterPivotModule } from 'ngx-flexmonster';

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

import { FlexmonsterPivotModule } from 'ng-flexmonster';

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

Step 3.2. Import Flexmonster styles (e.g., in src/styles.css):

@import "flexmonster/flexmonster.min.css"

Step 3.3. Insert the <fm-pivot> directive (e.g., in src/app/app.component.html):

<fm-pivot
 [toolbar]="true">
</fm-pivot>

The toolbar is one of the <fm-pivot> attributes. Learn more about the <fm-pivot> directive.

Step 4. Run the application

Run your application from the console:

ng serve --open

Open your project in the browser to see the result.

You can also watch our video tutorial that covers the integration process for the ng-flexmonster wrapper. The integration process for the ngx-flexmonster wrapper is the same:

Usage examples

We prepared the following examples of Flexmonster usage:

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

See also

• Use methods and events
• About the <fm-pivot> directive
• Connect to your data source
• Configure Flexmonster
• Update Flexmonster