Widget resize event

[Bishan_T_Prasad]

Hi,

I’m trying to make my custom element responsive based on widget size. But I’m not aware how to get the widget resize event. Could anyone help me here please?

[Tristan_Bastian]

Hi Bishan,

There are different approaches to this.
Ideally you wouldn’t need to catch any resize event as your widget would be implemented in a responsive way that would just adapt to changing width and height via CSS.

Some of the community widgets are using the angular-resize-event package to get the size changes e.g. the cumulocity-layered-map-widget-plugin.

Within Cumulocity, we are using dependency injection to get the DashboardChildComponent (Web SDK documentation) which wraps around the widgets component. It offers an changeEnd EventEmitter.
You can subscribe to this EventEmitter and filter for lastChange to equal resize.
Note that this approach will only inform you about directly resizing the widget via the functionality in the bottom right corner of the widget. If the widget width increases because you increased the browsers window size, this EventEmitter won’t notify you.

Regards,
Tristan

[Bishan_T_Prasad]

Hi Tristan,

Thanks for the information.

[Bishan_T_Prasad]

Hi Tristan,
Using angular-resize-event package does the trick provided the height as 100% to parent element.

Thanks for the suggestion!