Need a special offer?Find out if your project fits.
  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 15 as well as earlier versions.

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


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

    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

    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 node_modules/ and adds it as a dependency to package.json.

    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:

    import { FlexmonsterPivotModule } from 'ng-flexmonster';
    	imports: [
    		// 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):


    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

    You can see the result at http://localhost:4200/.

    Usage examples

    We prepared the following examples of Flexmonster usage:

    See also