Network plugin + Observable = UI not refreshed

A simple page with data and async pipe is not reloaded when observable emits new value.

I created a blank page with Ionic CLI.
I add the Network plugin.
In the home page I listen network changes, the console logs the changes but UI is not refreshed …


  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  bootstrap: [AppComponent]
export class AppModule {}

test$: Observable<string>;

  constructor(private network: Network) {}

  ngOnInit(): void {
      this.test$ = concat(

          tap(() => console.log('Connection changed !')),
          map(() =>,
          tap(type => console.log('Connection type', type))

      Ionic Blank

  <div class="ion-padding">
    The world is your oyster.
    <p *ngIf="test$|async as test">{{test}}</p>

I run the app with ionic cordova run android -lcs (on my device connected by USB)
I change the network type by disableing the wifi. The console logs :

Connection changed ! Connection type 4g

The UI is not refreshed …
What’s wrong ???

Can someone help me ??

import { ChangeDetectorRef } from ‘@angular/core’;

constructor( private cd: ChangeDetectorRef);

try this

Ok I found the solution …
More explanations in this post :
My solution

Thanks but this does not work well.
I found a more elegent and 100% working solution.
If you’re interested in : My solution

1 Like