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

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

    Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample Angular project or the Angular pivot table demo.

    Prerequisites

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

    Step 1. (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 2. Get Flexmonster

    There are two Flexmonster wrappers for Angular:

    Run one of the following commands inside your project to get the chosen wrapper. If your Angular version is compatible with both wrappers, we recommend choosing the ngx-flexmonster:

    ngx-flexmonster

    flexmonster add ngx-flexmonster

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

    The ngx-flexmonster wrapper is compatible with Angular versions 14 and later.

    ng-flexmonster

    flexmonster add ng-flexmonster

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

    The ng-flexmonster wrapper is compatible with Angular versions 5 through 15.

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

    Step 3. Embed Flexmonster

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

    ngx-flexmonster

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

    ng-flexmonster

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

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

    @import "flexmonster/flexmonster.min.css"

    Step 3.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 4. Run the application

    Run your application from the console:

    ng serve --open

    Open your project in the browser to see the result.

    You can also watch our video tutorial that covers the integration process for the ng-flexmonster wrapper. The integration process for the ngx-flexmonster wrapper is the same:

    Usage examples

    We prepared the following examples of Flexmonster usage:

    See also