Example with widget events

[anvial]

Hello,

Cloud You please give example how to use widget.event interface...

I don't clearly got it from your "lisa-ui" project.

The current case: I need to put the close-button into custom widget html.

Thank You!

[jaumard]

Hi,

To do that nothing specific to do, create your html close button that trigger an onClose method on your widget, then just propagate the event to your master component that contain the dashboard. And then just do:

this.dashboard.removeItemById(id); // Id of your widget

on the example app I've done it but for basic widget not a custom one https://github.com/jaumard/ngx-dashboard/blob/master/demo/src/app/app.component.ts#L52 but it's the same concept, just propagate an event from the widget to your "page" component and remove it from the dashboard

[anvial]

And how to subscribe on "onClose" event in parent component?

In lisa-ui project I found such example: ref.onChange.subscribe(widgetEvent => this.onDeviceValueChanged(widgetEvent));

That's why I asked about widget.events

[jaumard]

If you look at what it is here https://github.com/mylisabox/lisa-ui/blob/master/src/app/components/widget/widget.component.ts#L34

You just need an EvenEmitter that will push event from your widget class:

@Output() onCloseSubject: EventEmitter<YourObjectEventYouWantToPropagate> = new EventEmitter();
....
onClose() {
    this.onCloseSubject.next(new YourObjectEventYouWantToPropagate(this.id));
}

Then on your master component just subscribe to this event like I did ref.onCloseSubject.subscribe(widgetEvent => this.data.dashboard.removeItem(widgetEvent.id));

It's pseudo code but that's the idea.

[anvial]

Yeap, thank You! I've got the working event (onClose) handler.

[jaumard]

Great 👍 closing this :)