How to update data in the menu after the app is initialized?

Ionic Framework ionic-v3
1

Hi!

I have some content on the left menu that can only be displayed after the user is logged in. Currently the menu sits in the app.html and the data comes from the app.js, which is processed only when the app runs for the first time.

The problem is that after the user goes through a login page I have extra data, but how do I make the app.js aware of this? I’m using a provider for all the data and this is how I see it happening:

  1. User is not logged in, app.js requests data to the provider, which returns empty.
  2. User logs in, now the provider has the relevant data stored and can provide it when requested
  3. Problem: app.js already made the request at the beginning and stored the empty data to its instance, so nothing will appear in the menu.

How do I make the app.js fetch new data from the provider once the user logs in? Or the only way to solve this is putting the menu somewhere else outside app.html?

Hopefully I made the problem clear enough :slight_smile: Thank you!

2

I came across the same problem, and found the solution: use Events. In your app.js constructor:

this.events.subscribe('user:loggedIn', currentUser => {
      this.currentUser = currentUser;
});

In app.html:

<ion-menu [content]="content">

  ...  

  <ion-content>
    <div *ngIf="currentUser">
      ...
    </div>
  </ion-content>

</ion-menu>

Finally, in your service fire the event when appropriate:

this.events.publish('user:loggedIn', user);

See http://ionicframework.com/docs/v2/utils/events/ for more info.

IMPORTANT: be aware of a bug in latest Ionic version. Workaround here: Publishing/Subscribing to events stopped working

2 Likes
3

And you can simple work with references, because it is pure javascript under the hood. --> share the service globally with all components, add setter and getter methods in your service like userService.getCurrentUser() --> this returns the user-Object.

Now you can call this function once in your components (and all are sharing the same instance) --> in your template you can simple check if a key on the object exists currentUser.id exists.

I have same problems with use many events and sharing whole objects, because you get the same effect --> if you subscribe the event and the event is triggered you share the whole user-object (reference) to the component.

I would only share simple values --> you are listening to “user:loggedIn” --> there i would only pass true or false, so you know in your subscription okay i am now loggedin or loggedout --> maybe this enough to know.
If not you can call your getter-Method of your service.

4

Is this already in v2? even if the url says v2 the icon in the page where it links says v1.2, which is confusing as the v2 official docs look diferent.

5

this has nothing to do with ionic 2… it is about how you use services (injectables) and events (observables) in angular 2.

6

Would you mind to explain how to do the following part

And you can simple work with references, because it is pure javascript under the hood. → share the service globally with all components, add setter and getter methods in your service like userService.getCurrentUser() → this returns the user-Object.

Now you can call this function once in your components (and all are sharing the same instance) → in your template you can simple check if a key on the object exists currentUser.id exists.

It sounds easier but I can’t see how to implement it in the above use case.