Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Using methods and events

    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.

    Prerequisites

    • An Angular application with Flexmonster embedded into it.
      If Flexmonster is not yet embedded, see Integration with Angular.

    Create a reference to the <fm-pivot> instance

    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 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 the Flexmonster wrapper used in your project:

    ngx-flexmonster

    import { FlexmonsterPivot } from 'ngx-flexmonster';

    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.

    Depending on the Flexmonster wrapper, the full code from steps 2-4 should look similar to the following:

    ngx-flexmonster

    import { Component, ViewChild } from '@angular/core';
    import { FlexmonsterPivot } from 'ngx-flexmonster';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent {
      @ViewChild('pivot') pivotRef!: FlexmonsterPivot;
      // other code
    }

    ng-flexmonster

    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.

    Use methods

    Call Flexmonster methods using the previously created pivotRef reference:

    this.pivotRef.flexmonster.setReport(this.report);

    Some methods can also be defined as <fm-pivot> attributes:

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

    Such methods include:

    Check out the sample Angular project for more examples with Flexmonster methods.

    See the full list of Flexmonster methods.

    Use events

    There are two ways to subscribe to Flexmonster events:

    You can also unsubscribe from an event.

    Subscribing to an event via the <fm-pivot> attributes

    Define an event as the <fm-pivot> attribute in round brackets and assign an event handler to it:

    <fm-pivot #pivot
     [toolbar]="true"
     [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.

    Learn more about events in Angular.

    Subscribing to an event via the on() method

    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.

    Unsubscribing from an event

    Use the off() method to unsubscribe from an event:

    this.pivotRef.flexmonster.off('reportcomplete');

    This will remove all handlers from the event. To remove a specific handler, pass its name as a second parameter to off():

    this.pivotRef.flexmonster.off('reportcomplete', onReportComplete);

    Note If a handler is specified as an anonymous function, you can remove it only by removing all handlers.

    See how the off() method is used in the sample Angular project.

    See also