The FlexmonsterPivot component embeds Flexmonster into an Angular application.
To add an empty pivot table, specify the <fm-pivot> tag without any attributes:
<fm-pivot> </fm-pivot>
Learn more about integration with Angular.
All the FlexmonsterPivot input properties are equivalent to the parameters of the new Flexmonster() API call. Check out the full list of available properties.
In addition to Flexmonster-specific input properties, you can also set standard HTML attributes (e.g., id, class, and style).
Property names must be surrounded by square brackets:
<fm-pivot [toolbar]="true"> </fm-pivot>
Property values must be surrounded by double quotes, as in the example above.
The values can have any type, including an Angular variable available in the current scope. String values must be surrounded by single quotes within double quotes:
<fm-pivot [report]="'https://cdn.flexmonster.com/reports/report.json'"> </fm-pivot>
Angular lifecycle hooks are not synchronized with Flexmonster's lifecycle. However, you can get information about Flexmonster's state using its events.
To track the initialization of Flexmonster, use the ready or the reportcomplete event. Changes in Flexmonster's state (e.g., a report is changed) can be tracked via other Flexmonster events.
Learn more about using Flexmonster events in Angular.
The following example demonstrates how different FlexmonsterPivot properties can be set:
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'" [toolbar]="true" [width]="'100%'" [height]="500" [report]="'https://cdn.flexmonster.com/reports/report.json'" (reportcomplete)="onReportComplete()"> </fm-pivot>
Note Here is the full list of available properties.
