Integration with Ionic

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

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

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.

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.

In an Ionic React application, the FlexmonsterReact.Pivot component’s usage is the same as it is in React.

All attributes are equivalent to those passed to the new Flexmonster() API call. Check out the full list of available attributes.

Here is an example demonstrating how different attributes can be specified:

<FlexmonsterReact.Pivot 
 toolbar={true}
 report="https://cdn.flexmonster.com/reports/report.json"
 width="100%"
 reportcomplete={this.reportCompleteHandler}
/> 

In the above example, notice this line:

reportcomplete={this.reportCompleteHandler}

Here, we add a reportCompleteHandler to the reportcomplete event. Event handlers can be specified for all available Flexmonster events. Here is the full list of Flexmonster events.

In an Ionic Angular application, the fm-pivot directive’s usage is the same as in Angular: the name of each directive’s attribute is surrounded by square brackets, and each attribute’s value can be of any type, including an Angular variable.

To use a string value, enclose it by single quotes within the double quotes (e.g., [report]="'https://cdn.flexmonster.com/reports/report.json'").

All attributes are equivalent to those passed to the new Flexmonster() API call. Check out the full list of available attributes.

Here is an example demonstrating how different attributes can be specified:

<fm-pivot
    [toolbar]="true"
    [width]="'100%'"
    [height]="500"
    [report]="'https://cdn.flexmonster.com/reports/report.json'"
    (reportcomplete)="onReportComplete()">
   Flexmonster will appear here
</fm-pivot>

In the above example, notice the following line:

(reportcomplete)="onReportComplete()"

Here, we add the onReportComplete handler to the reportcomplete event. In Angular, events are surrounded by round brackets instead of square brackets. Here is the full list of Flexmonster events.