How to make Qlik Sense extensions built with AngularJS re-render on resize or when the data changes?

[#1]

When using plain JavaScipt, we write the rendering logic inside the 'paint' function and it gets executed and the view gets re-rendered, whenever we resize the element, or when the data changes on applying filters.

But when using AngularJS controller, re-rendering is not happening in both the cases. I've to refresh the browser to see the changes take effect.

Please help me with this.

[ErikWetterberg]

Hi,

Yes that's a way to do it: the Validated event is actually not an angular event, but one that Qlik Sense defines. You probably also could use the paint method.

Erik Wetterberg

[rhannuschka]

A bit late maybe, but we have not the same problem. I want to know when grid cell size has been changed so we could recalculate some stuff ( scrollbars / virtual scroll). At this point we use Angular 2+ to create extensions so the Angular1 scope is not very usefull.

In short ( this is Typescript nothing special for JS just remove Types ) to get notified something has been changed, just use the MutationObserver to get notified some styles changes  ( or other dom properties ).

// get parent cell which describes width and height of the cell
const cell: HTMLElement = $element.closest('.cell').get(0);
const obs = new MutationObserver((mutations) => {
    // at this point we get notified if grid cell style has been changed
    // this could be width, height, left or top 
    // this only happens if we  modify the grid cell into editor
    console.log(mutations);
});

/** tell the mutation observer to watch the cell for style changes */
obs.observe(cell, {
    attributes: true,
    attributeFilter: ["style"]
});

/** @todo disconnect on destroy to avoid memory leaks */