Screen orientationChanged update text

Question

View:

<Label [text]="name"></Label>

Component:

import {  Component } from '@angular/core'
import * as screenOrientation from '@nativescript/core/application';

@Component({
 selector: 'ns-new',
 templateUrl: './new.component.html',
 styleUrls: ['./new.component.css'],
})

export class NewComponent {

  name:string = "Not Rotated";
  constructor( ) {
    screenOrientation.on("orientationChanged", this.onOrientationChanged)
  }

  onOrientationChanged = (evt) => {
    console.log("old name " + this.name);
    this.name="Rotated";
    console.log("new name " + this.name);
  }
}

When screen is rotated, text dont change.

• screen rotated
• code is executed
• BUT text in Label dont change.

Do anyone know what did I miss, or where is the problem?

Answer 1

I think that the problem is that when you makes changes "outside" Angular, you need indicate Angular that a change happens (*). For this, you need use ngZone

//in constructor you inject ngZone
constructor(private ngZone: NgZone) { }

//when a change outside Angular happens

onOrientationChanged(evt) => {
  //this line happens outside Angular
  console.log("old name " + this.name);

  this.ngZone.run(() => {  //but these another run in Angular
      this.name="Rotated";
      console.log("new name " + this.name);
  })
})

(*)Typical cases are calls in javaScript or events from Cordova