Need a special offer?Find out if your project fits.
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • 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.


    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.

    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.

    What’s next?

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