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

Ionic Framework Ionic Angular
1

i’m facing this issue . but unfortunately there were no satisfactory solutions.
also saw these topics too, which says the same to make a service :
How to pass data to appcomponent page from other page

but i need some solution with app component so i don’t have to do major changes.

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 the updated data to local storage. this local storage contains the updated name too, 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.

2

I would create a simple “EventsService” where you can use a Subject to push and subscribe to changes of any kind

3

any example or link to read please ?

4

i think you are talking about this :

events
events819×431 23.3 KB

but moderator in ionic said that Observable can do every think that events can:

observable
observable841×305 30.9 KB

how can we do that with observables?

5

I said create your own EventsService. The one you mentioned there is not even available any more.

And exactly what @rapropos said is what i mean. If you don’t know how to create that and how to use Subjects/Obseevables i would recommend to investigate a bit more time into understanding Angular and rxjs.

I found this: Understanding rxjs Subjects. The main reason to use Subjects is to… | by Luuk Gruijs | Medium

6

okay, i’ll try to implement it. Thanks…

7

In your app.module.ts

import { AppComponent } from './app.component'; //if you don't have
@NgModule({
  declarations: [AppComponent,...], //if you don't have
...
})

And in your mypage.page.ts (or whatever your page is)

import { AppComponent } from './app.component';
...
...
export class MypagePage{
constructor(private appcomponent:AppComponent,...){}
your_variable='';
your_method(any_arg:any){
this.appcomponent.your_appcomponent_member=any_arg;
}
}

And in your app.component.ts

export class AppComponent{
...
...
your_appcomponent_member='';
}

thats it.

8

thank you guys for you help. i’ve learnt a lot and solved my problem with observabels using this link: How to pass data to appcomponent page from other page - #4 by rapropos. I do have a concept of services. 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 used this “this.profile” in my html to access the updated “name” which i had in my model.

9

Two relatively minor notes:

Comments are a mixed blessing. What’s much better is self-documenting code, which includes naming conventions. When I see a bare user, I instantly assume “that’s a lexically-scoped variable”. Having that name potentially collide with a type of the name user is confusing. So types should always start with a capital letter (PascalCase).

Secondly, since you already bothered to define a User type, that’s great. Use it. profile: User, not profile: any. any totally nerfs much of the value in using TypeScript in the first place. You virtually never need it in your own code - it’s generally most needed when writing libraries.

1 Like
10

thank you. i’ll keep that in mind.