Changing variables inside platform.ready?

Ionic Framework ionic-v3
1

Hey guys, I have this simple page (Beta 4):

constructor(platform) {
  this.title = 'INITIAL';
  platform.ready().then(() => {
    this.title = 'INSIDE PLATFORM;
  });
}

and in the HTML:

<ion-content>
{{title}}
</ion-content>

When I run this, title stays as INITIAL and never changes to INSIDE PLATFORM… unless I do something else outside platform.ready that triggers changes (like tapping a button or something).

Is this something of Angular 2 that I’m not understanding?

If I import ChangeDetectorRef from angular2/core and do cdr.detectChanges() inside platform.ready() then it works, but this feels weird.

2

It seems that maybe there’s a problem with platform.ready() in beta.4, see this thread for details:

3

any way to setup a JS plunker for me to try something out?

4

@nanexcool Sorry, but I’m not sure how to configure a plunker which uses ES6 syntax. For TS I used a configured plunker template which is available when creating a new Ionic issue but I don’t find a JS version there. Check if you can find a preconfigure ES6 plunker in Google.

5

@nanexcool You have to use NgZone to solve this in Ionic 2.

import {Page, Platform} from 'ionic-angular';
import {NgZone} from 'angular2/core';

@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
  static get parameters() {
    return [[Platform], [NgZone]];
  }

  constructor(platform, zone) {
    this.title = "INITIAL";
    platform.ready().then(() => {
      zone.run(() => {
        this.title = "INSIDE PLATFORM";
      });
    });
  }
}
6

But I find it really weird that with Typescript there’s no need for using NgZone. Why is it only required using Javascript?