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

    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.

    Setting the <fm-pivot> attributes

    Attribute names must be surrounded by square brackets:

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

    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>

    Handling events

    In Angular, events are specified in round brackets. The following example shows how to handle the reportcomplete event:

    <fm-pivot
    	[report]="'https://cdn.flexmonster.com/reports/report.json'"
    	(reportcomplete)="onReportComplete()">
    </fm-pivot>

    Useful links:

    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.

    See also