Ionic 4 - Network - Run in Angular Zone

Hi everyone,
recently I faced a problem with the Ionic Network library.
When I tried to change the UI on a network type change (connection or disconnection) the code is run but the UI does not change at all …
After some headaches, some strange logs ([…] chages outside Angular zone […]), and some Google searches … I found something.
It seems the Ionic Network library is run outside the Angular Zone (I’m quite noob with Angular, so at first I did not know what it meant …) even if this library is specified to work with Angular … (@ionic/network/ngx) …

So I think it is nice to share my method (maybe not the best, but it works ^^).

Step 1 : Creation of a pipe to run observable in the Angular zone

import {NgZone} from '@angular/core';
import {Observable, OperatorFunction} from 'rxjs';

export function runInZone<T>(zone: NgZone): OperatorFunction<T, T> {
  return (source) => {
    return new Observable(observer => {
      const onNext = (value: T) => =>;
      const onError = (e: any) => => observer.error(e));
      const onComplete = () => => observer.complete());
      return source.subscribe(onNext, onError, onComplete);

Step 2 : Wrapping Ionic Network in a Service with «runInZone» pipe

import {Injectable, NgZone} from '@angular/core';
import {Network} from '@ionic-native/network/ngx';
import {Observable} from 'rxjs';
import {runInZone} from './utils/observable-util.service';

 * Network service in Angular zone
  providedIn: 'root'
export class NetworkService {

  constructor(private network: Network, private zone: NgZone) { }
  get Connection(): {
    UNKNOWN: string;
    ETHERNET: string;
    WIFI: string;
    CELL_2G: string;
    CELL_3G: string;
    CELL_4G: string;
    CELL: string;
    NONE: string;
  } {

   * Network type
  get type(): string {

   * Returns an observable to watch connection changes
  onChange(): Observable<any> {

   * Get notified when the device goes offline
  onDisconnect(): Observable<any> {

   * Get notified when the device goes online
  onConnect(): Observable<any> {

Step 3 : Use the new network service in place of Ionic Network
For example, trigger an ngrx redux store action

import {NetworkService} from './services/network.service';

export class AppComponent implements OnInit {
        private store: Store<RootStoreState.State>,
        private network: NetworkService,
    ) {}
    ngOnInit() { => ConnectionStatusStoreActions.Disconnect())); => ConnectionStatusStoreActions.Connect({network:})));

Step 5 : The UI is refreshed on connection changes
You can chill and breath ^^


Thanks for this. :+1:
Strange thing… in my case, BLE was working on ionic serve properly but did not refresh view on android.

I haven’t tried ios yet, but with your solution android and web works perfectly !

for future reference
Plugin I am using:

and I am connecting to an ESP32 MCU (1 NOTIFY service).