Changes done in one component view doesn't reflect in another component view in angular 4

Question

Here I am changing some data in one component ex: change user profile picture of one module and the same profile picture should be reflected in another component of some other module. These are not parent/child components. Hence I am importing the module and particular component. calling a function of the component which assigns the scope value of the profile picture. That function is triggered and changed url is appearing in console, If I print that in console. But not reflecting in View. I tried with ChangeDetectorRef and this.ref.detectChanges(); But it is giving error as

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for ChangeDetectorRef!
Error: No provider for ChangeDetectorRef!

and also tried with Zone.run().
But it didn't work for me. Could anyone please help.

 constructor(private appHeaderComponent: AppHeaderComponent) { }


//component 1 sending data
uploadProfilePicture = (event) => {
 if (this.profileFormData) {
     this.headerService.savePhoto(this.profileFormData, 'profile-pictures').then((saveProfilePhotoData) => {
         if (saveProfilePhotoData['status_code'] === 200) {
             this.appHeaderComponent.getUserImage(saveProfilePhotoData['result']['pictures'][0]['imageUrl']);
         }
     });
  }
 }


//component 2 Receiving data
getUserImage = (image) => {
 if (image) {
     this.userImage = image;
 } else {
     this.userImage = sessionStorage.profilePicture;
 }
}

Answer 1

I would recommend you to store the user in some service (user-service.) When Component1 updates the user profile URL, update the user in the user-service. Make sure both the components are subscribed to the user in the user-service. This way the Component2 would always see the same user as Component1

Sample code

export class UserService {

   public userReplaySubject = new ReplaySubject<User>(1);

   setUser(u: User){
     this.userReplaySubject.next(u);
   }
}

export class Component1 { 

  user: User;

  constructor(private userService: UserService) {
      // Will always have the latest user in the service
      this.userService.userReplaySubject.subscribe(user => {
         this.user = user;
      });
  }

  updateUserProfile(){
    //when the profile-url changes, update the user service
    this.userService.setUser(user);
  }
}


export class Component2 { 

  user: User;

  constructor(private userService: UserService) {
      // Will always have the latest user in the service
      this.userService.userReplaySubject.subscribe(user => {
         this.user = user;
      });
  }

}