How to pass data to appcomponent page from other page

Ionic Framework ionic-v3
1

I’m using ionic 4.

i defined sidemenu in app.component.html and i want to pass username (this data comes from api in login.page.ts) to sidemenu after login.
i’m able to store username value in some variable in login.page.ts, but i want to pass this value to app.component.html.

Passing value to app.component.ts
How to pass updated user name from edit profile page to app component's side menu?
2

This should be keep within a service module. This module would contain all the communication with the api and the user status. There should be several good tutorials on how to set this up.

3

but can you please tell a way to do this with app.component ? I have same problem and i’m afraid that changing it to service will ran into trouble. Or at least give some links to do so.

i have a scenario where user can update his profile info .for example user edits user name now the API call updates the data and also i save that updated data to local storage. this local storage contains the updated name too now, which i want to display on side menu and this menu is in app component.

any help how can i do that?
i tried to call the local storage in app component but it seems like that it only loads once.

4

I would urge you to avoid the temptation to tie data layer / business object lifecycle to view layer / presentation component lifecycle. They don’t logically have a single thing to do with one another, and trying to piggyback your data freshness management onto component lifecycle events is a recipe for frustration.

See here for a sample idiom to manage the exact issue you discuss here: user profile information. Bonus thread here on the topic of how device storage fits into the picture (note that you only want to be reading from storage once per app run).

1 Like
How to pass updated user name from edit profile page to app component's side menu?
5

okay, i look into it. thanks.

6

Use IONIC service to make data transfer between pages.
Refer this https://edupala.com/ionic-service/

1 Like
7

I am working on a ionic angular project, where I use app.component.ts as a service page :slight_smile: . Moreover I can get and set values from different pages in the app.component. Service is just a component which has no UI and routes :sweat_smile:.

1 Like
8

thank you guys for you help. i’ve learnt a lot and solved my problem with observabels. I do have a concept of service. all my API calls i made are exist there.

so what i did i import and create observable in my service file:

  import { Observable, BehaviorSubject} from 'rxjs';
  .
  .
  .
  public profile$ = new BehaviorSubject<user | null>(null);

then in same service file i had a function to update user profile:

  public editProfile(editForm:user):Observable<user>{
 // here i made API call 
 this.profile$.next(editForm); //in this observable i passed the updated model coming from my profile.ts file
}

then in same service file i created a function to return this observable:

watchProfile(): Observable<user | null> {
  return this.profile$;
}

after that in app.component.ts file i did the following:

 import { EditProfileService } from '...';
 .
 .   
 .
 profile: any; //variable to store response
 . 
 .
 .
  constructor(
       private editProfileService: EditProfileService) {}
  .
  .
  .
 ngOnInit(){ 
   //accessing user updated data  
   this.editProfileService.watchProfile().subscribe((value)=>{
     this.profile = value;
     console.log(this.profile,"app comp profile");
   }); 
}

now use this “this.profile” in html to access the updated “name” which i had in my model.