Update ui based on network status

Ionic Framework ionic-v3
1

Hello, I want to be able to update an ionic page based on the network status. the function is being called but the page is not being updated. Grateful if some advice can be given.

Message Service that sends the messages to all subscribers.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

/*
  Generated class for the MessageProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MessageProvider {

  private subject = new Subject<any>();
  constructor() {}

  sendMessage(message: string) {
    this.subject.next(message);
  }

  clearMessage() {
    this.subject.next();
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

The code to watch the network status is as follows and are found in app.component

network.onDisconnect().subscribe(() => {
        console.log(0);
        MessageProvider.sendMessage('Not Connected!');
      });

network.onConnect().subscribe(() => {
        console.log(1);
        MessageProvider.sendMessage('Connected!');
      });

The message is being transmitted to the page.ts but the UI is not getting updated.

message: any;
subscription: Subscription;
    ionViewDidLoad() {
        this.subscription = this.MessageProvider.getMessage().subscribe(message => {
          console.log(message); 
          this.message = message; 
        });
      }
2

I find it supremely confusing when people don’t follow ordinary JavaScript naming conventions. I can’t tell what the execution context of any of your calls to MessageProvider is because you seem to have a property name that collides with the class name.

You are also saying that the problem is that “the page is not being updated”, but I don’t see the page template, so have no idea how anything is supposed to be displayed.

Finally, please give proper types to things and stop abusing any. In this case, it appears all of your anys can simply be replaced by string.

3

Hello,
The template is as per below

  <p>
    {{message}}
  </p>

Just for testing purposes I have named the property same as the class name as below

import { MessageProvider } from './../../providers/message/message';
import { Page1Page } from './../page1/page1';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  message: any;
  subscription: Subscription;
  constructor(public navCtrl: NavController, private MessageProvider: MessageProvider) {
    
  }

  ionViewDidLoad() {
    this.subscription = this.MessageProvider.getMessage().subscribe(message => {
      console.log(message); 
      this.message = message; 
    });
  }

}
4

So would you kindly address the issues in my previous post and eliminate the name clashes and abuse of any?

5

Hello,

thanks for the reply. I have addressed the issues you mentioned. But still when i toggle the wifi connection on my phone, the text is not updated on the page even though the console prints the value.

Thanks for helping,
Ashley

6

Would you mind posting the updated code?

7

Yes Sure,

import { MessageProvider } from './../../providers/message/message';
import { Page1Page } from './../page1/page1';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  message: string;
  subscription: Subscription;
  constructor(public navCtrl: NavController, private messageService: MessageProvider) {
    
  }

  ionViewDidLoad() {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log(message); 
      this.message = message; 
    });
  }

}
8

And what does the app component look like now?

9

Hello,

Apologies for replying so late. I have found a solution to my problem. Grateful to have your advice. See code below using NgZone

this.subscription = this.messageService.getMessage().subscribe(message => {
     this._zone.run(() => {
      this.message = message; 
      });
    });

Ashley

10

No, if you are directly interacting with zones, something is fundamentally broken.

1 Like
11

Ok. If you don’t mind me asking, can you point in the direction how I can troubleshoot this part?

Ashley