Using Network events to update UI

@Kizmar wrote:

I've been smashing my face against this for too long, and I think I know what the problem is, but not how to fix it yet. I'm trying to use Network and Connection to determine if the device connection is available or not. I subscribed to "Network.onDisconnect()" and "Network.onConnect()". Which are firing correctly when tested on the device.

The issue comes in when I drop a property on the class to be bound in the view. I've tried this about 73 different ways, but I have a feeling the network subscription function isn't updating the boolean in the Angular2 zone, so the change isn't detected. Still learning, and Angular2 zones are still over my head at this point...

The most simple example is this (ignore my inconsistent conventions) :

import { Network, Connection } from 'ionic-native';
// ...other imports...

@Page(...)
export class SomePage {
    private _disconnectSub: any;
    private _connectSub: any;
    public hasConnection: boolean = false;

    constructor(platform: Platform) {
        this._platform.ready().then(res => {
            // Bind to the Network events, and set the initial value of the bool
            this._disconnectSub = Network.onDisconnect().subscribe(this.onNetworkDisconnect);
            this._connectSub = Network.onConnect().subscribe(this.onNetworkConnect);
            this.hasConnection = Network.connection != Connection.NONE;
        });
    }

    private onNetworkDisconnect() : void {
	this.hasConnection = false;
	console.log('Connection lost!', this.hasConnection, Network.connection);
    }

    private onNetworkConnect() : void {
	let self = this;
	setTimeout(function () {
	    self.hasConnection = Network.connection != Connection.NONE;
	    console.log('Connection restored!', self.hasConnection, Network.connection);
	}, 2000);
    }
}

The view's HTML has something simple like this:
<p>{{ hasConnection }}</p>

The above renders as "true" on the page when the app loads. When testing on my device, if I turn on airplane mode, I get the right console.log messages, but "hasConnection" never changes in the UI.

Posts: 1

Participants: 1

Read full topic