Angular 2 + Typescript displaying variable from within function

Question

I'm completely new to typescript and Angular 2 and I'm having some trouble trying to output to a page within a Cordova / Angular app.

Page ( book.html ):

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Book</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Book</h3>

  <p>
    Book page.
  </p>
  <p>
    <span>{{ oBookingDebug }}</span>

  </p>

</ion-content>

Code ( book.ts ):

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-book',
  templateUrl: 'book.html'
})
export class BookPage {
    public oBookingDebug: string = "";

    constructor(public navCtrl: NavController, public iab: InAppBrowser) {

        this.oBookingDebug="TEST"; // <-- WORKS AND SHOWS ON THE PAGE!!

        const browser = this.iab.create('http://**');
        browser.on("loadstop")
        .subscribe(
        () => {
            browser.executeScript(
            {
                code:'localStorage.getItem("bookingObject");'
            }).then(
                (oBooking)=>{
                    alert(oBooking); // Test
                    this.oBookingDebug="DAVE"; // <-- DOESNT WORK!!
                });
        },
        err => {
            console.log("InAppBrowser Loadstop Event Error: " + err);
        });

    }
}

If you look at my comments you can see what works and what doesn't, how do I access the page to output from within the executescript callback, id like to be able to display to the page at this point but also assign to a variable for later access too.

David · Accepted Answer · 2017-09-04 20:31:07Z

2

Seems like Angular change-detection is making your life hard here, try this:

import { ChangeDetectorRef } from '@angular/core'

constructor(private cdr: ChangeDetectorRef) {}

and in your callback:

(oBooking) => {
  this.oBookingDebug = 'DAVE';
  this.cdr.detectChanges();
});

This tells Angular it should check if something changed and if there's something to render in the DOM-tree. Here you can find the docs.

answered Sep 4, 2017 at 20:31

David

7,5373 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Lowe Over a year ago

Worked perfectly, who would of known it would be that simple, thanks you.

David Over a year ago

Glad I could help! Change-detection is always a good tip if something (that usually works) is not doing what you exepected it to do.

Collectives™ on Stack Overflow

Angular 2 + Typescript displaying variable from within function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related