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