Binding to service property needs page refreshing!

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”.

U need show the state asyn with Observers …
like this Ionic 3 network connectivity check how to implement for all pages (components)?

You mean, use observable and subscribe from the page? I suppose it will work but the question is why it does not now. I mean, the value of the property changes, so why the template (binding) does not change?

Because the property is not in the component. Angular can not check if the date is changing.