CODEWITHSUNDEEP
angularionic-frameworkcomponents
muuvmuuv
muuvmuuv

Reputation: 953

Angular 4 - Update content dynamically across components

maybe I'm searching the wrong terms but I't get that working.

I have a sidebar (component1) where the user is displayed with his name and in my content section (component2) there is a form where the user can update his name. Now if the user is changing his name and the database says okay, the name should also change on the sidebar.

In Ionic there is a event subscription where a function wait for a event to be fired (there I could fetch the user again). Is there something similar in Angular 4?

Edit1:

Here is where the components are located. The best way would be if my auth.service store and update the user. If some other component is doing changes they call a getUser function in auth.service and update the user objet for all other components that hooked them before.

https://i.sstatic.net/xKllS.png

https://i.sstatic.net/IoFyV.png

Upvotes: 0

Views: 103

Answers (1)

Miquel Canal
Miquel Canal

Reputation: 1121

I would use RxJS observables to listen to any changes applied on the form: the component 1 and component 2 could use a subject to communicate between them. When the user submits the form, an external service or the component 2 itself, sends the data to the backend and waits for the response.

If the response is successful, then it uses the next() method of RxJS subject to let other components know about the new user details. As component 1 is subscribed to that same subject, it will receive the updated data.

This approach allows, not only component 2, but any other component subscribed to the subject know about the updates.

Upvotes: 1

Related Questions