Show/Hide Card when variable changes

Ionic Framework ionic-v3
1

Hi, please, can you help me?

I have ion-card. I want to show it only when the value of variable changes, but without reload the page.

My card:

  <ion-card *ngIf="!global.internet">
    <ion-card-content text-center style="background-color: darkred; color:#FFFFFF;">
      <strong>OFFLINE MODE</strong>
    </ion-card-content>
  </ion-card>

Above, if globa.internet is false, does not show the card. Its happaning, but I need to reload de page. How can I show/hide this Card when the variable is changed without refresh the page?

Thanks, :slight_smile:
Daniel.

2
3

Thanks, I tried, but that does not apply to me.
I dont know how this can resolve my problem.

Thanks again.

4

How does global.internet change?

5

In my app.component.ts I have an event from network native plugin:

      let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
        this.global.internet = false;
      });
6

And the HTML of the card is in app.component.htm (assuming app.component.ts uses this as template)?

7

No, the HTML is in other place.
The “global.internet” is in a provider, so I can read/set this from anywhere.

This “mechanics” is working, but the card only refresh when page “Enter” or “Load” again.

8

how do you declare this.global? as property of the class or via the constructor (injector)?

9

“global” is from provider: GlobalProvider.

Declaring in “constructor” of in the component:

constructor(
. . .
    public global: GlobalProvider,
. . .
  }

And below, a piece of GlobalProvider:

@Injectable()
export class GlobalProvider {
   public internet = false;

   public verifyInternet() {

    if (this.network.type == 'none') {
      this.internet = false;
    } else {
      this.internet = true;
    }

  }

}
10

ok

well that is pretty non-standard way of communicating with providers. If you want to change state of a provider, use one of its methods. Even though this may seem to work

Secondly, I am not sure if the change detectionin Angular is supposed to work like this. I am not sure if it will want to detect changes in such a variable. Better use a property of the specific component which is coupled to the html.

The ideal pattern to follow is to have the provider return an observable which the component subscribres to in order to receive changes and as of that change the local property (local to the component).

This way you also don’t need a method like verifyInternet()

11

So something like

@Injectable()
export class GlobalProvider {

   informNetworkDisconect() {
             return this.network.onDisconnect()
   }
}

Then any consuming component should subscribe and change its own property linked to the html

@Component( ..... )
export class myGreatComponent {

     sub:Subscription;
isDisconnected:boolean=false;

    constructor (myGlobalProvider:GlobalProvider) {}

   ionViewWillEnter() {

     this.sub = this.myGlobalProvider.informNetworkDisconect().subscribe(val=>{this.isDisconnected=true})
}

ionViewWillLeave() {
  this.sub.unsubscribe()

}
     
}

if you get what I mean

12

And the HTML still this??

<ion-card *ngIf="isDisconnected">
    <ion-card-content text-center style="background-color: darkred; color:#FFFFFF;">
      <strong>OFFLINE MODE</strong>
    </ion-card-content>
  </ion-card>
13

I made the changes, the behavior is the same: the card is shown only if I refresh the page (showing / hiding menu, or going to to other component and back again).

But thanks for helping me. I will research more… I think your solution is the way.

14

well the html is indeed ok I would say (for this purpose).

I would have to look at the code. Unfortunately stackblitz.com doesnt allow for native plugins, otherwise you could test with online code

good luck.

15

Hum… great!! I can “simulate” the network plugin creating methods in new provider, giving me the “status”.

16

Here!!
The service allow native plugins.
But I dont know how change the ‘state of network’ for testing.