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 source code of Flexmonster wrapper for Angular from GitHub to the src/app/ folder.

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

npm uninstall ng-flexmonster

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

Step 1.3. Install the flexmonster package:

flexmonster add js-flexmonster

Step 2. Embed Flexmonster

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

// 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. Create a FlexmonsterPivot instance using the <fm-pivot> tag (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 FlexmonsterPivot input properties. Learn more about the FlexmonsterPivot component.

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: