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.
npm install -g flexmonster-cli
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 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.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.
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:
Learn more in our guide: Usage examples.
Adjust Flexmonster to your needs: