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 and npm
Angular CLI
Flexmonster CLI
Install it with the following command:
```
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: