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.

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

    Prerequisites

    Note Node.js and Angular CLI versions must be compatible. Check out this version compatibility matrix.

    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
     
    @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:

    See also