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

    Integration with Angular

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

    To test Flexmonster in a ready-to-use Angular application, use our sample project.

    Prerequisites

    Step 0. (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 && cd flexmonster-project

    Step 1. Get Flexmonster

    To get Flexmonster for Angular, run the following command from the folder with package.json:

    flexmonster add ng-flexmonster

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

    Note If you are using Angular 4, see Integration with Angular 4.

    Step 2. Embed Flexmonster

    Step 2.1. Import FlexmonsterPivotModule into src/app/app.module.ts:

    import { FlexmonsterPivotModule } from 'ng-flexmonster';
    
    @NgModule({
    	...
    	imports: [
    		FlexmonsterPivotModule
    		// other imports
    	],
    	...
    })

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

    @import "flexmonster/flexmonster.min.css"

    Step 2.3. Insert the <fm-pivot> directive (e.g., in src/app/app.component.html):

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

    The toolbar 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 in our guide: Usage examples.

    What’s next?

    Adjust Flexmonster to your needs: