The <fm-pivot> directive

The <fm-pivot> directive embeds Flexmonster into an Angular application.

The simplest directive usage

To add an empty pivot table, specify the <fm-pivot> directive without any attributes:

<fm-pivot>
</fm-pivot>

Learn more about integration with Angular.

Available attributes

All the <fm-pivot> attributes are equivalent to the parameters of the new Flexmonster() API call. Check out the full list of available attributes.

In addition to Flexmonster-specific attributes, you can also set standard HTML attributes (e.g., id, class, and style).

Setting the <fm-pivot> attributes

Attribute names must be surrounded by square brackets:

<fm-pivot 
  [toolbar]="true">
</fm-pivot>

Note To subscribe to events via the attributes, specify the event names in parentheses. Learn more about subscribing to Flexmonster events via the <fm-pivot> attributes.

Attribute 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>

Flexmonster and Angular lifecycle hooks

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.

Example

The following example demonstrates how different <fm-pivot> attributes can be specified:

<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 attributes.