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

**URL:** <https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983>\
**Category:** Ionic Angular\
**Created:** [July 26, 2021, 4:03pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983 "2021-07-26T16:03:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umaima123](https://avatars.discourse-cdn.com/v4/letter/u/6a8cbe/32.png) [@Umaima123](https://forum.ionicframework.com/u/Umaima123)\
**Post date:** [July 26, 2021, 4:03pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/1 "2021-07-26T16:03:08Z")

</div>

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](https://forum.ionicframework.com/t/how-to-pass-data-to-appcomponent-page-from-other-page/164695)

> [@Passing value to app.component.ts](https://forum.ionicframework.com/t/passing-value-to-app-component-ts/89790/23):
>
> i’m facing the same issue . but unfortunately there were no satisfactory solutions. also saw that topic too, which says the same to make a service : [How to pass data to appcomponent page from other page](https://forum.ionicframework.com/t/how-to-pass-data-to-appcomponent-page-from-other-page/164695) but i need some solution with app component so i don’t have to do major changes. or at least some demo example to do so. i have a profile edit page 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 lo…

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.

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [July 26, 2021, 5:25pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/2 "2021-07-26T17:25:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Umaima123](https://avatars.discourse-cdn.com/v4/letter/u/6a8cbe/32.png) [@Umaima123](https://forum.ionicframework.com/u/Umaima123)\
**Post date:** [July 26, 2021, 5:37pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/3 "2021-07-26T17:37:46Z")

</div>

any example or link to read please ?

---

<div class="post-metadata">

**Author:** ![Umaima123](https://avatars.discourse-cdn.com/v4/letter/u/6a8cbe/32.png) [@Umaima123](https://forum.ionicframework.com/u/Umaima123)\
**Post date:** [July 26, 2021, 5:46pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/4 "2021-07-26T17:46:22Z")

</div>

i think you are talking about this :

 ![events](https://global.discourse-cdn.com/ionicframework/original/3X/8/a/8a55aa41a91565d67c1cc808b5addce59e19beae.png)

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

 ![observable](https://global.discourse-cdn.com/ionicframework/original/3X/7/6/7672f80944a4416a7053eb192d93df0a7c1931ce.png)

how can we do that with observables?

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [July 26, 2021, 5:51pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/5 "2021-07-26T17:51:32Z")

</div>

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](https://luukgruijs.medium.com/understanding-rxjs-subjects-339428a1815b)

---

<div class="post-metadata">

**Author:** ![Umaima123](https://avatars.discourse-cdn.com/v4/letter/u/6a8cbe/32.png) [@Umaima123](https://forum.ionicframework.com/u/Umaima123)\
**Post date:** [July 26, 2021, 5:55pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/6 "2021-07-26T17:55:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mani0011](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@mani0011](https://forum.ionicframework.com/u/mani0011)\
**Post date:** [July 27, 2021, 4:21am UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/7 "2021-07-27T04:21:32Z")

</div>

In your app.module.ts

```auto
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)

```auto
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

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

```

thats it.

---

<div class="post-metadata">

**Author:** ![Umaima123](https://avatars.discourse-cdn.com/v4/letter/u/6a8cbe/32.png) [@Umaima123](https://forum.ionicframework.com/u/Umaima123)\
**Post date:** [July 27, 2021, 7:54am UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/8 "2021-07-27T07:54:25Z")

</div>

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](https://forum.ionicframework.com/t/how-to-pass-data-to-appcomponent-page-from-other-page/164695/4). 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:

```auto
  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:

```auto
  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:

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

```

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

```auto
 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.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 27, 2021, 6:29pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/9 "2021-07-27T18:29:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Umaima123](https://avatars.discourse-cdn.com/v4/letter/u/6a8cbe/32.png) [@Umaima123](https://forum.ionicframework.com/u/Umaima123)\
**Post date:** [July 28, 2021, 5:27pm UTC](https://forum.ionicframework.com/t/how-to-pass-updated-user-name-from-edit-profile-page-to-app-components-side-menu/212983/10 "2021-07-28T17:27:27Z")

</div>

thank you. i’ll keep that in mind.