Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Integration with Angular 4

    Follow this guide to integrate Flexmonster into an Angular 4 application. For later Angular versions, see Integration with Angular.

    Prerequisites

    Step 1. Get Flexmonster

    Step 1.1. Download the Flexmonster Angular module 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
     
    @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. Insert the <fm-pivot> directive (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 <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:

    • Creating the pivot table
    • Working with API calls and events
    • Customizing Flexmonster
    • Integrating with charts

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

    What’s next?

    Adjust Flexmonster to your needs: