Integration with Angular

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.

Prerequisites

Node.js
Angular CLI
Flexmonster CLI
Install it with the following command:
```
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: