Sample Angular project

This guide will help you run a sample Angular project from GitHub. It is a ready-to-use application with several live Flexmonster demos. Get the sample project to try out Flexmonster.

To integrate Flexmonster into an existing Angular project, see integration with Angular.

Prerequisites

• Node.js 22.22.3 or later
• Flexmonster CLI
  Install it with the following command:

  npm install -g flexmonster-cli

Step 1. Get the sample Angular project

Run the flexmonster create command in the console:

flexmonster create angular -r

This command downloads the sample project from GitHub and launches it in the browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

The sample project is located inside the flexmonster-angular-project/ folder in your current working directory.

Step 2. Check out the project’s structure

Our sample project is based on a skeleton Angular application, so most of the project’s files are the same as in the skeleton. Learn more about these files in Angular docs:

• Workspace configuration files
• Application project files

Now take a look at the files specific to our sample project:

• src/app/app.routes.ts — route definitions for the sample project.
• src/app/app.config.ts — application configuration that registers the routes and the Highcharts provider.
• src/app/common/ — menus and toggle elements used in the sample project.
• src/app/examples/ — demos that cover different aspects of Flexmonster usage in Angular:
  • Creating the pivot table (pivot-table-demo/)
  • Handling events (handling-events/)
  • Using API calls (using-api-calls/)
  • Updating data at runtime (updating-data/)
  • Customizing the Toolbar (customizing-toolbar/)
  • Customizing the grid (customizing-grid/)
  • Integrating with Highcharts (with-highcharts/)
  • Integrating with amCharts (with-amcharts/ — amCharts 5; with-amcharts4/ — amCharts 4)

Learn more about how these demos work: Usage examples.

Next steps

Integrate into an existing Angular project or adjust the sample project to your needs:

• Connect to your data source
• Configure Flexmonster
• Save your configurations
• Apply a CSS theme
• Integrate with charting libraries