ngStyle not triggered on screen rotation

I use ngStyle in my html :

<div [ngStyle]="getCSS()"></div>

On android, when I rotate my screen, my getCSS() function isn’t called…
Others elements of the view are recomputed according to new resolution

how can I force this function to be called?

because angular2 does not notice that your rotated the screen.

so your need to add an eventlistener to the
orientationchange event.

Is it possible to trigger it from a listener?

here is my rotation listener :

let me = this;
window.addEventListener('resize', function () {
  me.onResize();
}); 

I mean, can I make my div call getCSS() from this listener?

Something like that:

@Component({
  template: `
<div [ngStyle]="styles"></div>
`
})
class XXX {
  styles = {};

  constructor() {
    this.setStyles();
  }

  setStyles() {
    // calc style values, stores them in this.styles
  }

  ionViewDidLoad() {
    // add EventListener when page is loaded
    window.addEventListener('resize', this.setStyles);
  }
  ionViewDidUnload() {
    // cleanup listener, when page gets removed
    window.removeEventListener('resize', this.setStyles);
  }

}

Still not working, this styles variable seems not be “read” again after being updated in the listener…

I’ve done this workaround :

<div #myElement></div>

and :

class MyPage {

  @ViewChild('myElement') myElement: any;
  
  ...

  ionViewDidLoad() {
    let me = this;
    window.addEventListener('resize', function() {
      me.myElement.nativeElement.style.height = me.computedHeight();
      me.myElement.nativeElement.style.width = me.computedWidth();
      ...
    }
  );
}

A i know. there is a bug in Angular 2 where you are not able to call function references direclty as callbacks --> the change detection get not triggered.

could you try the following for me, with my code example?

window.removeEventListener('resize', this.setStyles.bind(this));

Because it would be awefull if you are not removing the listener, if the component gets destroyed. --> Memory Leak and so on

Hi back, sorry to reply late, your method :

this.setStyles.bind(this)

works well to keep the “this scope”, thanks!
But my “setStyles()” methods is still not called on screen rotation, seems like a screen rotation do not trigger any changes on html binding.
On touch event for example the “setStyles()” is called from my HTML [ngStyle], but not on screen rotation.

could you try to wrap

me.myElement.nativeElement.style.height = me.computedHeight();
      me.myElement.nativeElement.style.width = me.computedWidth();

in a setTimeout() call?

setStyles() {
  setTimeout(() => {
    me.myElement.nativeElement.style.height = me.computedHeight();
    me.myElement.nativeElement.style.width = me.computedWidth();
    ...
  });
}

Still not working, as setStyles is not even called…

oh you need to listen to

window.addEventListener("orientationchange", this.setStyles().bind(this));

sry. i do not check if the event you listen on is correct :frowning:

“resize” event is also thrown on screen rotation, as width becomes height, and height becomes width.
So it’s still not working, and even if setStyles() is called from a TS function it sill not helps me, cause setStyles() must be called from html binding, to apply the CSS… :sweat: