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 20.19 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:

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

src/app/app-routing.module.ts — route definitions for the sample project.
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: