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
– CHAZTATS, Commented Feb 27, 2018 at 11:55
yes. it is like constructor(private ref: ChangeDetectorRef){} — Thilak Raj
– Thilak Raj, Commented Feb 27, 2018 at 12:41

GSSwain · Accepted Answer · 2018-02-27 12:16:39Z

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
Would you kindly share your component definitions including the templates
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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related