app.on("orientationChanged") unable to change value in class variable


#1

Hi all,

I have a component as below:

import { isAndroid, isIOS, device, screen } from "platform";
import * as app from "tns-core-modules/application"

export class XyzComponent implements OnInit {

  public orientation: string;
  public testVar: string = "here!";


  ngOnInit(): void {
        app.on("orientationChanged", (evt) => {
            this.onOrientationChanged(evt);
        }); 
  }

    public onOrientationChanged(evt) {

        console.log("Orientation has changed !");
        console.log(evt.eventName); // orientationChanged
        
        this.orientation = evt.newValue;
        console.log("orientation: " + this.orientation); //landscape or portrait
        this.testVar = "booboo!";
    }   
}

In my template, I am simpily printing out {{orientation}} and {{testVar}} in a Label. However, orientation seems to be null and testVar doesn’t seem to change (so the template is still printing “here!”). Sorry for this dumb question but is there a reason why this is not updating when screen orientation changes? I can see the callback method is called successfully in my log, but the values on the screen aren’t updating.


#2

Hi,

I think the orientationChanged event is not part of the Angular lifecycle, so you’ll need to do:

    public orientationIsLandscape: boolean;

    constructor(private zone: NgZone) { // import { NgZone } from "@angular/core";
    }

    application.on(application.orientationChangedEvent, (arg: OrientationChangedEventData) => {
      this.zone.run(() => {
        this.orientationIsLandscape = arg.newValue === "landscape";
      });
    });

#3

Thanks very much Eddy! That works great!