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.
npm install -g flexmonster-cli
Note Node.js and Angular CLI versions must be compatible. Check out this version compatibility matrix.
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
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.1. Import FlexmonsterPivotModule
into src/app/app.module.ts
:
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
You can see the result at http://localhost:4200/
.
We prepared the following examples of Flexmonster usage: