This guide explains how to use Flexmonster methods and events in an Angular application. First, we will create a reference to the Flexmonster instance. Then we will use this reference to call methods and subscribe to events.
To access Flexmonster API inside the .component.ts
file, we need a reference to the <fm-pivot>
instance. Follow the steps below to create the reference using the @ViewChild decorator:
Step 1. In the HTML template of the component with Flexmonster (e.g., src/app/app.component.html
), assign a template reference variable to the <fm-pivot>
instance (e.g., #pivot
):
<fm-pivot #pivot [toolbar]="true"> </fm-pivot>
Step 2. In the component’s TypeScript file (e.g., src/app/app.component.ts
), import the @ViewChild
decorator:
import { Component, ViewChild } from '@angular/core';
Step 3. In the same TypeScript file, import FlexmonsterPivot
from ng-flexmonster
:
import { FlexmonsterPivot } from 'ng-flexmonster';
Step 4. In the same TypeScript file, use @ViewChild
to inject a reference to the <fm-pivot>
instance (e.g., pivotRef
):
@ViewChild('pivot') pivotRef!: FlexmonsterPivot;
pivot
is the template reference variable assigned to the <fm-pivot>
instance in step 1.
The full code from steps 2-4 should look similar to the following:
import { Component, ViewChild } from '@angular/core'; import { FlexmonsterPivot } from 'ng-flexmonster'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('pivot') pivotRef!: FlexmonsterPivot; // other code }
The pivotRef
reference to the <fm-pivot>
instance is created.
In this guide, we will use the pivotRef.flexmonster
property, which is a reference to the Flexmonster instance. The pivotRef.flexmonster
gives you access to Flexmonster API.
Call Flexmonster methods using the previously created pivotRef
reference:
this.pivotRef.flexmonster.setReport(this.report);
Check out the sample Angular project for more examples with Flexmonster methods.
See the full list of Flexmonster methods.
There are two ways to subscribe to events:
You can also unsubscribe from an event.
Define an event as the <fm-pivot> attribute and assign an event handler to it:
<fm-pivot [report]="'https://cdn.flexmonster.com/reports/report.json'" (reportcomplete)="onReportComplete()"> </fm-pivot>
The sample Angular project demonstrates how to subscribe to events via the directive’s attributes.
See the full list of Flexmonster events.
Use the previously created pivotRef
reference to call the on() method:
this.pivotRef.flexmonster.on('reportcomplete', onReportComplete);
See how the on()
method is used in the sample Angular project.
Check out the full list of Flexmonster events.
Use the off() method to unsubscribe from an event:
this.pivotRef.flexmonster.off('reportcomplete');
See how the off()
method is used in the sample Angular project.