Integration with Angular

This tutorial will help you integrate Flexmonster with Angular. Our component is compatible with the latest Angular 22 as well as earlier versions.

Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample Angular project or the Angular pivot table demo.

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 --ssr=false && cd flexmonster-project

Step 2. Get Flexmonster

Get Flexmonster for Angular by running the following command inside your project:

flexmonster add ngx-flexmonster

This command downloads the ngx-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

Note This wrapper is Ivy-compatible and works only with Angular 14 and later. If you want to use Flexmonster in Angular 5 through 15, install the ng-flexmonster wrapper.

Step 3. Embed Flexmonster

Step 3.1. Import FlexmonsterPivotModule into your component (e.g., src/app/app.component.ts):

import { Component } from "@angular/core";
import { FlexmonsterPivotModule } from "ngx-flexmonster";

@Component({
  selector: "app-root",
  imports: [FlexmonsterPivotModule],
  templateUrl: "./app.component.html"
}) 
export class AppComponent {
  // ...
}

If you are using NgModules instead of component imports, add FlexmonsterPivotModule to your NgModule (e.g., src/app/app.module.ts):

import { FlexmonsterPivotModule } from "ngx-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. Create a FlexmonsterPivot component instance using the <fm-pivot> tag (e.g., in src/app/app.component.html):

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

The toolbar is one of the FlexmonsterPivot input properties. Learn more about the FlexmonsterPivot component.

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

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page. 

Next steps

• Use methods and events
• Read about the FlexmonsterPivot component
• Connect to your data source
• Configure Flexmonster
• Update Flexmonster