All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Integration with Ionic

    This guide will help you integrate Flexmonster with the Ionic framework, which allows creating cross-platform mobile applications.

    Prerequisites

    Run a sample project from GitHub

    Follow the steps below to run a sample application demonstrating Flexmonster integration with Ionic and React or Ionic and Angular.

    Step 1. To get our sample project, download it as ZIP or clone it with the following commands:

    Ionic React project

    git clone https://github.com/flexmonster/pivot-ionic-react
    cd pivot-ionic-react

    Ionic Angular project

    git clone https://github.com/flexmonster/pivot-ionic
    cd pivot-ionic

    Step 2. Install the npm dependencies described in the package.json file with the following command:

    npm install

    Step 3. Run the sample application with the following command:

    npm run start

    The application can be shut down manually with Ctrl + C (Control + C on macOS).

    Integrate Flexmonster into an Ionic application

    The steps to embed Flexmonster into an application vary depending on the type of Ionic application.

    Ionic React project

    Flexmonster can be integrated into an Ionic React application in the same way it is integrated into a React and Typescript application. See integration with React + Typescript for details.

    To create a new Ionic React application, refer to the Ionic documentation.

    Ionic Angular project

    Flexmonster can be integrated into an Ionic Angular application in the same way it is integrated into an Angular application. See integration with Angular for details.

    To create a new Ionic Angular application, refer to the Ionic documentation.

    Flexmonster parameters

    The usage of Flexmonster parameters depends on the type of Ionic application.

    Ionic React project

    In an Ionic React application, the FlexmonsterReact.Pivot component’s usage is the same as it is in React. Learn more about this component and its props: The FlexmonsterReact.Pivot component.

    Ionic Angular project

    In an Ionic Angular application, the FlexmonsterPivot component’s usage is the same as in Angular. Learn more about this component and its input parameters: The FlexmonsterPivot component.

    What’s next?

    You may be interested in the following articles: