I want my side-menu to use particular data that is only available once a user logs in to the home page. But since the side-menu has to be part of app.html, I cannot fill it with data that is not available yet, as app.html runs as soon as the app is launched. How do I fill my side-menu with data only when my home page loads ? ( The home page isn’t the root page )
1 Like
I would try it this way:
Initialize the variable with some valid data structure. Handle this in the template.
Use a provider that contains the data. Subscribe to an Observer on that data in app.component.ts
If you really have to “trigger” something, Events are the way to go. But I don’t think this is necessary here.
Out of curiosity, how can I use events ? Is there any way my app.component.ts can know if a particular page has loaded ?
http://ionicframework.com/docs/api/util/Events/
You fire off the event in the page, receive and handle it wherever you want.
1 Like
Thank you Sujan12 ! This worked perfectly
Personally, I think this is a massive design mistake. If the various parts of your app are not independent and interacting via clearly-defined interfaces, the code is hard to read, maintain, and test. Everything involving page X should be confined to page X, not spread out throughout the app.
No, I don’t think it is a design mistake at all. The menu I’m creating displays information about the user that has logged in, such as his username, his avatar, and his email address. And there isn’t just one user using my app : there are many, so it should show information depending on who has logged in. Since all menus are part of app.html, and app.component.ts runs only once in the life cycle of the app, how is it supposed to initialize the menu with data, if the user hasn’t even logged in yet ? It needs to know that someone has logged in to the home page, and retrieve the relevant data only then, which is what I’ve achieved using events.
See the first part of my first answer 
I used events for this, curious as to how @rapropos would do it
“Who is logged in” is a categorically different thing from “which page is active” IMHO.
Why I don’t like events. How I prefer to handle authentication navigation.
I went through a code evolution where I used Ionic events for a couple things, and then once I had more understanding of Subjects, I went back and removed my events and replaced them with Subjects. But I did this because of an intuition that I got more control over behavior that way, not because of a formal analysis. This might be a thread hijack (so apologies to the OP), but why do you say Observables respect security more than events? The only way I’m connecting security to Observables is with streams like
isLoggedIn.switchMap(loggedIn => {
if (!loggedIn) { return Observable.from([]) }
else { return streamAvailableOnlyWhenLoggedIn }
})
Is that what you mean? Or are you talking about something completely different?
I probably should have said “type safety” instead of “type security”. If I have an Observable<Foo>, I know I’m getting a Foo. Events have zero type information on any of their handlers.
But my menu needs to initialize with data only when someone has logged in, which happens when the home page is loaded. And it knows which person has logged in because I’m storing the current logged in user in local storage. My menu can’t ask for data before someone has even logged in, which is what would happen if the app runs without binding a menu-data-filling method to a home-page loading event.
I just posted an Observable that does that, two comments up. It sounds as though you don’t know any rxjs yet, so a lot of things that are good practice currently seem impossible. I recommend you spend some time at https://www.learnrxjs.io/ and several comments in this thread will become more clear.
Hmm okay I think I’ll explore rxjs a bit more. It’s just that to me Events seemed like the most intuitive solution, but if Observables are the way to go about it, I’d definitely like to implement that instead. Thank you !
Events work. If you need to finish in 48 hours, stick with Events. Oberservables are much better in the long run though. So if you have time, you’ll become a much better programmer once you learn some rxjs. It almost feels like magic sometimes.
I think it’s a mistake to equate these two things. What you really care about is “when somebody has logged in or out”, so that is what you should expose and respond to. Otherwise, you have hamstrung yourself to where you can’t easily decouple view-layer events (what page is active) from authentication-logic-layer events (login/logout). Say you want to add a feature where local notifications send an automatically logged in user to a notification-viewing page. It’s not the home page, so your menu doesn’t set up correctly. What if the user wants to log out from the home page? Hard to do because you have to switch away from it and you don’t know when to tear down the menu. What if somebody leaves the home page and then comes back to it? Menu gets triggered twice when it shouldn’t be.
Isn’t this a natural evolution in how you do things?
- Direct access to variables by coupling very tight
- Different components use Events to tell each other to get some data that maybe changed
- Components subscribe to Observables to learn automatically when something changed
@Sidharth_1999 was on 1) and now went on to 2), @AaronSterling evolved from 2) to 3), @rapropos is hardcore 3) and doesn’t like if you are not 
Agree?
(Seriously, I think this is an interesting insight…)
1 Like