This tutorial will help you integrate Flexmonster with Angular.
Our component is compatible with the latest Angular 16 as well as earlier versions.
To test Flexmonster in a ready-to-use Angular application, use our sample project.
npm install -g flexmonster-cli
Note Node.js and Angular versions must be compatible. Check out the version compatibility guide.
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
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:
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.
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.1. Import FlexmonsterPivotModule
into src/app/app.module.ts
:
import { FlexmonsterPivotModule } from 'ngx-flexmonster'; @NgModule({ ... imports: [ FlexmonsterPivotModule // other imports ], ... })
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.
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:
We prepared the following examples of Flexmonster usage: