ngStyle not triggered on screen rotation


#1

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?


#2

because angular2 does not notice that your rotated the screen.

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


#3

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?


#4

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);
  }

}

#5

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();
      ...
    }
  );
}

#6

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


#7

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.


#8

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();
    ...
  });
}

#9

Still not working, as setStyles is not even called…


#10

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:


#11

“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: