How to refresh ionic header

Ionic Framework ionic-v3
1

Hey guys,

I am receiving a notification and a value. I put the value in a variable which is being use in the header of the page. The problem is that the header doesn’t update the value till i refresh the page using the “ion-refresh” tag. How can i refresh the header from the controller as soon as i change the value?

Thanks

2

How exactly are you outputting that variable?
How are you changing it?

3

Hey @Sujan12,

Here is the code:

subscribeToNotification() {
    this.events.subscribe('notification:received', numberNotification => {      
      this.numberNotification = numberNotification;
    })
  }

<ion-buttons end>
      <button ion-button icon-only color="light">
        <ion-icon name="notifications-outline">
          <span *ngIf="numberNotification">{{numberNotification}}</span>
        </ion-icon>
      </button>
    </ion-buttons>

Thanks for your help

4

I don’t think <ion-icon> expects to have children, so how that behaves might be undefined. What happens if you move that span out of there and instead directly under the button?

5

hey @rapropos,

I just did what you said, put the span directly in the button tag, still the same problem. the variable doesn’t update.

6

In general, this works, so can you upload a complete repo to github that reproduces your problem?

7

The code doesn’t belong to me, so if i do that i could run into trouble :sweat_smile:
are there another way for me to give you those information? For example: the complete code of the component and the component that communicate with it?

8

Create a new project with ionic start blank blank and implement the relevant parts you have - then put it on Github.

9

@rapropos and @Sujan12 that is exactly what i am doing right now, i will be right back :slight_smile:

1 Like
10

Sorry for took so long to answser. @rapropos you were right. I were trying to reproduce the error with blank project like you and @Sujan12 told me, then i realized that header was updating just fine. So surely i am doing something wrong in my original project. I am going to do some more debugging.
Sorry i publish the wrong link.

11

First thing I would check for is to search your entire codebase for the word “function” and replace any instance that is not at root level (i.e, that is inside of a method body) with an arrow function or lambda. It is really easy to do things like this:

foo() {
  this.service.thingy().subscribe(function() {
    // ruh roh, "this" is not what we expect in here
  });
}

, or, even more insidiously:

foo() {
  this.service.thingy().subscribe(this.bar);
}

bar(thingy) {
  // "this" is hosed in here as well
}
12

Thank you very much @rapropos, after following your advice i finally figure out that it was a contest problem. sorry for tooking to let you know that.