Documentation menu

Embed the Flexmonster UI

This tutorial describes how to start using the Flexmonster UI in your Angular project.

You can also try out the component using our sample Angular project.

Prerequisites

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

Step 1. (optional) Create an Angular application

If you already have an Angular app, skip this step.

Сreate an Angular app by running the following command in the console:

ng new flexmonster-project --ssr=false && cd flexmonster-project

Step 2. Get Flexmonster

Get Flexmonster for Angular by running the following command inside your project:

npm install angular-flexmonster

This command downloads the angular-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

Step 3. Embed the Flexmonster UI

Step 3.1. Import FMFlexmonster into your component (e.g., src/app/app.ts):

import { Component } from "@angular/core";
import { FMFlexmonster } from '@flexmonster/angular';

@Component({
  selector: 'app-root',
  imports: [FMFlexmonster],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class AppComponent {
  // …
}

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

@import '@flexmonster/flexmonster/flexmonster.css';

Step 3.3. Create a Flexmonster component using the <ngx-fm-flexmonster> tag (e.g., in src/app/app.html):

<ngx-fm-flexmonster>
</ngx-fm-flexmonster>

Step 4. Connect the Flexmonster UI to the sample data source

In this step, we will connect Flexmonster UI to the sample data hosted on the Flexmonster server. If you do not have the server yet, install the Flexmonster server.

Step 4.1. Create a state object with connection parameters for the sample data source:

public state: StateInputParams = {
  id: "fm-state",
  dataset: {
    dataSource: {
      url: "ws://localhost:9501/",
      name: "SampleData"
    }
  }
};

The url contains the server’s URL, and the name is the data source’s name. You can check out the data source name in the Admin Panel’s Data sources tab.

Step 4.2. Pass the state object to the Flexmonster instance:

<ngx-fm-flexmonster
 [state]="state">
</ngx-fm-flexmonster>

Step 5. Run the application

Run your application from the console:

ng serve --open

Open your project in the browser to see the result.

Next step