Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Sample Angular project

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

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

    Prerequisites

    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 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/)

    Learn more about how these demos work: Usage examples.

    What’s next?

    Integrate with an existing project: Integration with Angular.

    Or adjust the sample project to your needs: