I have a service to check the network condition (whether the user is connected to the internet or not).
import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network';
@Injectable()
export class NetworkProvider {
connectionStatus: string;
constructor(public network: Network) {
network.onDisconnect().subscribe(() => {
this.connectionStatus = 'disconnected';
console.log(this.connectionStatus);
});
network.onConnect().subscribe(() => {
this.connectionStatus = 'connected!';
console.log(this.connectionStatus);
});
}
}
In my template, I wanna show whether the phone is connected to the internet or not. Therefore, I bind to the ‘connectionStatus’ property.
.ts file:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NetworkProvider } from '../../providers/network/network';
@Component({
selector: 'page-conn',
templateUrl: 'conn.html'
})
export class ConnPage {
constructor(public navCtrl: NavController, public network: NetworkProvider) {
}
}
.html file
<ion-header no-border>
<ion-navbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<span>{{network.connectionStatus}}</span>
</ion-content>
While, in my console, I get every change in the connectionStatus property, the binding ONLY works when changing tab and coming back or when I hit the open tab again (like refreshing tab). This is really strange, unexpectable behaviour. Anyone had a similiar situation before? Any ideas what may be the problem?
For example:
If I am connected to internet and then disconnect, in my console, I will see “disconnected”, however, on the template it will still say “connected!”. If I change tab and come back or if I hit the active tab again, only then it will change to “disconnected”.