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

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.

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

any example or link to read please ?

i think you are talking about this :

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

how can we do that with observables?

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

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

In your app.module.ts

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

And in your (or whatever your page is)

import { AppComponent } from './app.component';
export class MypagePage{
constructor(private appcomponent:AppComponent,...){}

And in your app.component.ts

export class AppComponent{

thats it.

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
       private editProfileService: EditProfileService) {}
   //accessing user updated data  
     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.

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

thank you. i’ll keep that in mind.