Network plugin + Observable = UI not refreshed

Ionic Framework
1

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 …

app.module.ts

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

home.page.ts

test$: Observable<string>;

  constructor(private network: Network) {}

    /**
     *
     */
  ngOnInit(): void {
      this.test$ = concat(
          this.network.onConnect().pipe(debounceTime(2000)),
          this.network.onDisconnect()
      ).pipe(
          tap(() => console.log('Connection changed !')),
          map(() => this.network.type),
          tap(type => console.log('Connection type', type))
      );
  }

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

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

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 !
home.page.ts:26 Connection type 4g

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

2

Can someone help me ??

3

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

constructor( private cd: ChangeDetectorRef)

this.cd.detectChanges();

try this

4

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

5

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