Integration with Angular 4

Follow this guide to integrate Flexmonster into an Angular 4 application.

Note Angular 4 is no longer under support. We recommend integrating with the latest Angular version: Integration with Angular.

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. Get Flexmonster

Step 1.1. Download the source code of Flexmonster wrapper for Angular from GitHub to the src/app/ folder.

Step 1.2. If you have previously installed the ng-flexmonster wrapper from npm, uninstall it:

npm uninstall ng-flexmonster

The wrapper installed from npm can be used only with Angular 5+ versions due to restrictions on metadata files.

Step 1.3. Install the flexmonster package:

flexmonster add js-flexmonster

Step 2. Embed Flexmonster

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

// ...
import { FlexmonsterPivot } from "./flexmonster.component";
 
@NgModule({
  // ...
  declarations: [
    AppComponent, FlexmonsterPivot
  ],
  // ...
}
export class AppModule { }

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

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

Step 2.3. Create a FlexmonsterPivot instance using the <fm-pivot> tag (e.g., in app.component.html):

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

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

Step 3. Run the application

Run your application from the console:

ng serve --open

You can see the result at http://localhost:4200/.

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

Next steps

• Using methods and events
• About the FlexmonsterPivot component
• Connecting to your data source
• Configuring Flexmonster
• Updating Flexmonster