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;
 }
}

How are you defining your ChangeDetectorRef? It should be : `constructor(private ref: ChangeDetectorRef){}` — CHAZTATS, Feb 27 '18 at 11:55
yes. it is like `constructor(private ref: ChangeDetectorRef){}` — Thilak Raj, Feb 27 '18 at 12:41

score 4 · Accepted Answer · answered Feb 27 '18 at 12:16

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;
      });
  }

}

I am getting the data in another component *ts* as I am passing the required data as an argument. I can see that in console also by printing it. But is not reflecting only in view — Thilak Raj, Feb 27 '18 at 12:46
Would you kindly share your component definitions including the templates — GSSwain, Feb 27 '18 at 12:53
So you are injecting a component into another component. I doubt they are the same instance. Would you put a console.log in the AppHeaderComponent and see how many times it is getting called. From a parent container, you can get the reference to your app-header-component using @ViewChild(AppHeaderComponent). I would still suggest to use a service, which is a singleton and all the components would get the same service instance. — GSSwain, Feb 27 '18 at 15:55

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

1 Answers1

Linked