Angular2, model synchronization between components

Question

I’m thinking about switching to Angular2 from my trusted backbone (or should I say that my boss wants to play with a new toy, which is good for me), I searched online many times and did some tests, but I seem to be unable to find the answer to this simple question:

Can I keep two models in sync between two components? Example: I have a list of users in the sidebar, which is one component, and a form for editing the specified users on my "main page", which is another component.

The sidebar is responsible for displaying its collection, and the form is responsible for receiving its model. When the model is updated, I want the changes to be reflected in the sidebar without having to go through the server again.

I know that SpinJS does this, and I hacked something in Backbone, using events to achieve the same (based on the model class and id), but I wonder if Angular2 has its own processing method? If not, how would you implement this behavior?

Thanks.

EDIT:

I added my test files to this Plunker: http://plnkr.co/edit/jIdnu68ZDMDSFJkomN3Y

First, select a hero and click "view details", this will make an http.get request to the server in memory to get the hero.

Secondly, click "Give a sword", this will add Weapons to the selected user. For testing purposes, instead of using an already loaded user, I request the same using http.get again.

When I change the name in the text box, the name of the second instance is not updated.

You must imagine that I cannot use the current instance of the hero for any reason, I want to request it again from the server.

Answer 1

You can share the service between components.

 @Injectable() export class SharedService { someField:string; } @Component({selector: 'parent-cmp', providers [SharedService], ...) export class ParentCmp { constructor(private model:SharedServicee) { } } @Component({selector: 'child-cmp', // don't add it to providers here so it gets the same instance // the parent got /*providers [SharedService] */, ...) export class ChildCmp { constructor(private model:SharedServicee) { } } 

When one component changes a field in a service, another service also appears in another component.

You can use Observable or EventEmitter to notify interested parties of changes or other events.

Answer 2

You can use shared services to subscribe to the same event in different components. (if you provide this service at boot time, it will give you the same object in all components. Very important!).

If you want to call http.get only once, and then just repeat this call, you should use:

 private _subject = new ReplaySubject(1); constructor(public http: Http) { this.http .get("...").subscribe(this._subject); } 

Full working example: https://plnkr.co/edit/G1mSXfpuYaIGXNwK5WKy?p=preview

Take a look at the network panel (chrome), the ajax call only starts once.

Answer 3

I think the best way to do this is to use an EventEmitter in a shared service. When a change is made, an event is generated on the event emitter. Other parts of the application that have registered against it will be notified.

See this answer:

• Delegation: EventEmitter or Observable in Angular2