Refresh component when changing variable

Ionic Framework ionic-v3
1

Hi Ionic-ers,
i need help with my application.
my app has a UDP receiver that, when receiving a certain string, updates a global value (i use a public class for comunication with pages)

my problem is this:
in a page i’ve this footer

<ion-footer *ngIf="global.playing">
    <ion-item text-wrap>
      <ion-label text-wrap>
        {{global.status}}
      </ion-label>

      <div slot="end">
        <ion-button *ngIf="!global.paused && !global.isImg" slot="end" (click)="pauseFile()" size="large"
          color="warning">
          <ion-icon name="pause"></ion-icon>
        </ion-button>
        <ion-button *ngIf="global.paused && !global.isImg" slot="end" (click)="resumeFile()" size="large">
          <ion-icon name="play"></ion-icon>
        </ion-button>
        <ion-button slot="end" (click)="stopFile()" size="large" color="danger">
          <ion-icon name="square"></ion-icon>
        </ion-button>
      </div>
    </ion-item>
  </ion-footer>

the variable global.playing is binded for make the footer visible or not

the UDPservice receives the string, generates a custom event, handled in the page up here
when my custom event is catched, i change the global.playing value to FALSE

my view doesnt’t change. i expect that the footer disappears, but NO…
i notice that the value of global.playing changes, and if i click on the phone, the footer disappears.

maybe i’ve to “refresh” components?
how can i do it?

thanks for your help
:slight_smile:

2

You need to use ngZone where you change the global.playing variable
For Example:

global.ts

import { Component, NgZone } from "@angular/core";
...
playing:boolean = false;

constructor(private ngZone: NgZone) {}

changePlaying() {
  this.ngZone.run(() => {
    this.playing = true;
  });
}
2 Likes
3

It works! thk u so much!

but…
i don’t know why :sweat_smile:
what is NgZone?
how does it work?

4

Its force the changes for the view

1 Like
5

Check this out NgZone

1 Like