This guide explains how to use Flexmonster methods and events in a Svelte application. First, we will get a reference to the Flexmonster instance. Then we will use this reference to call methods and subscribe to events.
To interact with Flexmonster through code, you need a reference to the <Flexmonster> component instance.
Declare a reference using Svelte’s bind:property directive:
<script lang="ts">
import { Flexmonster } from "svelte-flexmonster";
let pivot: Flexmonster.Pivot;
</script>
<div>
<Flexmonster
bind:pivot
toolbar
/>
</div>
The pivot variable now holds a reference to the Flexmonster component instance.
Call Flexmonster’s methods on the variable with the Flexmonster instance (e.g., pivot):
pivot.showCharts("pie");Some methods can also be defined as <Flexmonster> props:
<Flexmonster
bind:pivot
toolbar={true}
customizeCell={customizeCellFunction}
/>
Such methods include:
Find more examples of using Flexmonster’s methods in our sample Svelte project.
Check out the full list of Flexmonster’s methods.
There are two ways to subscribe to Flexmonster events:
You can also unsubscribe from an event.
Define an event as the component's prop and assign an event handler to it:
<Flexmonster
bind:pivot
toolbar={true}
beforetoolbarcreated={customizeToolbar}
/>
The event handler (in our case, customizeToolbar) should be defined in the <script> section of the file.
The sample Svelte.js project demonstrates how to subscribe to events via the component’s props.
See the full list of Flexmonster events.
Use the previously created pivot variable to call the on() method:
pivot.on("reportcomplete", onReportComplete);See how the on() method is used in the sample Svelte project.
Check out the full list of Flexmonster events.
Use the previously created pivot variable to call the off() method and unsubscribe from an event:
pivot.off(eventName);
This will remove all handlers from the event. To remove a specific handler, pass its name as a second parameter to off():
pivot.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 Svelte project.