How to pass data to appcomponent page from other page

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.