Need a special offer?Find out if your project fits.
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • 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.


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

    Step 1. Get Flexmonster

    Step 1.1. Download the Flexmonster Angular module's source code from GitHub to the src/app/ folder.

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

    npm uninstall ng-flexmonster

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

    Step 1.3. Install the flexmonster module:

    flexmonster add js-flexmonster

    Step 2. Embed Flexmonster

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

    // other imports
    import { FlexmonsterPivot } from './flexmonster.component';
    // other imports
    	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. Insert the <fm-pivot> directive (e.g., in app.component.html):


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

    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:

    See also