Integration with Angular 4

Follow this guide to integrate Flexmonster into an Angular 4 application.

Note Angular 4 is no longer under support. We recommend integrating with the latest Angular version: Integration with Angular.

Prerequisites

Node.js
Angular CLI
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

Note Node.js and Angular versions must be compatible. Check out the version compatibility guide.

Step 1. Get Flexmonster

Step 1.1. Download the Flexmonster Angular module's source code from GitHub to the src/app/ folder.

Step 1.2. If you have previously installed the ng-flexmonster module from npm, uninstall it:

npm uninstall ng-flexmonster

The module installed from npm can be used only with Angular 5+ versions due to restrictions on metadata files.

Step 1.3. Install the flexmonster module:

flexmonster add js-flexmonster

Step 2. Embed Flexmonster

Step 2.1. In the app.module.ts file, declare the FlexmonsterPivot module:

// other imports
 
import { FlexmonsterPivot } from './flexmonster.component';
 
// other imports
 
@NgModule({
	…
	declarations: [
		AppComponent, FlexmonsterPivot
	],
	…
}
export class AppModule { }

Step 2.2. Import Flexmonster styles (e.g., in src/styles.css):

@import "../node_modules/flexmonster/flexmonster.min.css";

Step 2.3. Insert the <fm-pivot> directive (e.g., in app.component.html):

<fm-pivot
	[report]="'https://cdn.flexmonster.com/reports/report.json'">
</fm-pivot>

Note The report is one of the <fm-pivot> attributes. Learn more about the <fm-pivot> directive.

Step 3. Run the application

Run your application from the console:

ng serve --open

You can see the result at http://localhost:4200/.

Usage examples

We prepared the following examples of Flexmonster usage: