Template variable not updating after exit event Ionic2

Question

I am trying to change template after InAppBrowser exit event. The variable changes inside the event is logging into the console.log(), but not changing the template.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {InAppBrowser} from 'ionic-native';    

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  browser:any;
  exit:boolean = false;
  name:string = "hero";
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  startPayment(){
    let lastUrl:string;
    this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done');
    this.browser.on("exit")
            .subscribe(
            e => {
                this.name = "zero";
                console.log(this.name);
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });

    this.browser.on("loadstop")
            .subscribe(
            e => {
                console.log(e);
                lastUrl = e.url;
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });
  };

  changeName(){
    this.name = 'abcd';
  }

and template is

<ion-content>
  <button ion-button color="primary" (click)="startPayment()">Pay Now</button>
  <p>
    {{name}}
  </p>
  <button ion-button color="primary" (click)="changeName()">change</button>
</ion-content>

The event is InAppBrowser exit event, working in console.log, but not changing the template {{exit}}.

But on lower button click it is working

Answer 1

As a general rule, when you use a third party library or something that runs outside angular 2, you must use ngZone to bring that library into your angular context so angular can do stuffs.

Inject zone to your constructor.

constructor(public navCtrl: NavController, public navParams: NavParams, public zone: NgZone) {
}

Import ngZone from @angular/core

Then use the context of your angular app on the callbacks.

startPayment(){
    let lastUrl:string;
    this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done');
    this.browser.on("exit")
            .subscribe(
            e => {
                this.zone.run(() => {
                   this.name = "zero";
                });                
                console.log(this.name);
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });

    this.browser.on("loadstop")
            .subscribe(
            e => {
                console.log(e);
                this.zone.run(() => {
                   lastUrl = e.url;
                });                
            },
            err => {
                console.log("InAppBrowser loadstart Event Error: " + err);
            });
  };

Good luck!