Update Ionic page when provider data changes using Firebase

Ionic Framework ionic-v3
1

Hi All,
I created a provider page and a user navigation page. The provider’s data gets updated when multiple users add/modify scores from the navigation page. But USER1’s page doesn’t get updated automatically unless I close and re-enter into the page when USER2 entered a new score or modified an existing score. Or even if USER1 modified the score when he is on the same page. How can I trigger changes to the navigation page when the data in the provider changes? Hows does navigation page know that the provider data has changes when we are already on the same page?

Here is my provider code (scoreProvider.ts)

getScores(): firebase.Promise<any> {
 return firebase.database()
  .ref('/scores')
  .orderByChild('startDate')
  .on('value', snapshot => {
    let rawList = [];
    snapshot.forEach(snap => {
      rawList.push({
        season: snap.key,
        startdate: snap.val().startDate,
        enddate: snap.val().endDate,
        winner: snap.val().winner,
        runner: snap.val().runner,
      });
      return false
    });
    resolve(rawList);
  });
}

Here is my user’s navigation page code (scores.ts)

ionViewDidLoad() {
  this.scoreProvider.getScores.then(snapshot => {
     this.scores = snapshot;
  });
}

If I move the entire code for getScores from the scoreProvider.ts to scores.ts, the page’s data gets updated automatically without refreshing the page. But,what if I need scores to be available on multiple pages. I have to duplicate the entire code everywhere which I am trying to avoid.

2

this might help you.

3

@amitk04 Thanks for the link. I will go though it. I think I should be using NgZone for this.

4

Yeah… that’s what that link suggests.
NgZone is best for such kind of functionality.

5

Thanks. I quickly glanced through your link and found NgZone implementations before I posted my first reply. But I will go through the link in detail and try to understand how it is implemented and post more questions if I have any :blush:

6

Sure… good luck. :slight_smile:

7

In my opinion, any time you are manually dealing with zones you are band-aiding over a problem that can be solved in a cleaner fashion.

8

Thanks @rapropos. As per this link Ionic2 with Real-time data not updating(firebase)

There were fixes in Ionic2 beta 6 and we do not have to use NgZone. Now we are at Ionic 3 and trying to find out how much Ionic and change detection strategies have evolved and what is the best way to use it.

Observable? Subscribe? Factor?

Basically there are 2 solutions and I am looking for options

  1. declare an array in provider and populate it from Firebase. Then use the provider variable in all pages instead of copying it to local variable in each page so that when the provider object array is refreshed, all pages will get new data automatically.

OR

  1. create a function which returns a promise from Firebase and use the function to refresh local variables in each page but whenever provider data changes, all pages that reference it should be made aware and refresh their local variables again.
9

I’ve never used Firebase, but are you using AngularFire? I assumed it would take care of problems like this.