Network detection


i follow this tuto from Simon Grimm to check connectivity.

Two remarks :

  • displaying status network works fine only if i navigate and come back to the page.

  • toast message seems to works only with the last value

I really love to not have to navigate and come back to display the network status.

here is “my” code :

network service :

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';
import { BehaviorSubject, Observable,of} from 'rxjs';
import { ToastController, Platform } from '@ionic/angular';

export enum ConnectionStatus {

  providedIn: 'root'
export class Network2Service {

  public status: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);

  constructor( private toastController: ToastController, private plt: Platform) { 
    this.plt.ready().then( ()=>{
      let status = !== 'none' ? ConnectionStatus.Online : ConnectionStatus.Offline;;

  public initializeNetworkEvents(){
    console.log('initialize network events'); ()=>{
      if(this.status.getValue() === ConnectionStatus.Offline){
        console.log('We are Offline');
    }); ()=>{
      if(this.status.getValue() === ConnectionStatus.Online){
        console.log('We are Online');

  private async updateNetworkStatus(status: ConnectionStatus) {;

    let connection = status == ConnectionStatus.Offline ? 'Offline' : 'Online';
    let toast = this.toastController.create({
      message: `You are now ${connection}`,
      duration: 3000,
      position: 'middle'
    toast.then(toast => toast.present());

  public onNetworkChange(): Observable<ConnectionStatus> {
   return this.status.asObservable();

  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.status.getValue();


component :

public status:Observable<ConnectionStatus>;

ngOnInit() {
 this.network2Service.onNetworkChange().subscribe( status=>this.status=of(status) );


        <ion-row><ion-col>{{ status | async }}</ion-col></ion-row>

i’ll try w/out async too: {{status}} , same result.

So how can i display " status" network in live (without navigate and come back) ?

Thank you for help

I still looking for a solution,
my readings take me at this question : what is the version of network should i use ?

here is what i have actually :

@ionic-native/core”: “5.0.0-beta.21”,
@ionic-native/network”: “^5.5.1”,

is this version works ? is there someone working with it ?

thank you,

basic question : is it possible to hide/show button binded to an observable (based on network detection) ?
the solution i have works on navigator (testing) but not on device … still stucked :frowning:

thank you,

i reply to myself : yes it is possible to hide/show anything based on observable.

i finally change my code (Simon tuto’s above) with this and its work really fine, both on browser and devices !

so i share :slight_smile:

in service :

import { Network } from '@ionic-native/network/ngx'; (5.6.0 version)

constructor(public network: Network, public platform: Platform) {$ = Observable.create(observer => {
      if ('cordova')) {
          // on Device
$ = merge(
      } else {
          // on Browser
$ = merge(
              fromEvent(window, 'online').pipe(mapTo(true)),
              fromEvent(window, 'offline').pipe(mapTo(false))

public getNetworkType(): string {

public getNetworkStatus(): Observable<boolean> {

in component

ngOnInit {

 networkSubscriber(): void {
        .subscribe((connected: boolean) => {
            this.isConnected = connected;
            console.log('isConnected = ', this.isConnected);


  if(status === true){
        console.log('You are now Online');
        this.presentToast('You are now Online');
        console.log('You are now Offline');
        this.presentToast('You are now Offline');


<div *ngIf="isConnected  === true && allCampagneCompleted && campagnes.length >0">
          <ion-col text-center>
            <ion-button  (click)="sync()">Push Data</ion-button>

A complete working code, for me same logic of Simon’s tutorial , i dont understand why this is working better than the other,
so if someone have idea, tell me !

thank you,

Hi, I use this default approach provided by JavaScript:

if (navigator.onLine) {
 console.log('Internet is connected');
} else {
 console.log('No Internet Connection found!');

But it’s not completely perfect way of detecting internet. You can learn more about it in W3School. Here is the quick link:

hmm … does the network plugin have a web implementation? When I was working on it, a few months ago, it didn’t have one