angular2 data binding by using reference data types in a service

Question

So I recently posted angular2 data binding between service and component properties and Thierry pointed out something interesting.

If I have a reference datatype like an array or an object stored in a service (singelton) and create references in various components pointing to it, the view will update for all components when the object is updated from anywhere (and it works!).

In my case, I'm building a small forum where thread objects will need to be displayed/viewed in various components at the same time(e.g. preview, mainview, dashboard...). For updating/editing text fields this might come really handy.

Now i'm wondering if this is save to use?

If your text field values are also stored in objects (hence stored in reference types), then yes, it is safe to use. If you want to use primitive types, see Thierry's answer. The cookbook also has an example of using a Subject: angular.io/docs/ts/latest/cookbook/… — Mark Rajcok
– Mark Rajcok, Commented Apr 6, 2016 at 15:37

Thierry Templier · Accepted Answer · 2016-04-06 14:16:03Z

0

You need to leverage observables on which components will subscribe to be notified when fields have changed.

Something like that:

export class Service {
  name = "Luke";
  nameUpdated = new Subject();

  getName() {
    return this.name;
  }

  updateName() {
    this.name = 'Luke1';
    this.nameUpdated.next(this.name);
  }
}

and in the component:

this.name = this._service.name;
this._service.nameUpdated.subscribe(name => {
  this.name = name;
});

See this plunkr: https://plnkr.co/edit/CRE92tdCsteoS2MVeGfh?p=preview

answered Apr 6, 2016 at 14:16

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Han Che Over a year ago

what you've added now is a way to get the view updated for changes of primitives datatypes in the service right? (i guess new Subject is an observable?). In any case thanks for the help!

Thierry Templier Over a year ago

In fact your component is now notified of updates in the service and can update the properties the view is bound on accordingly. Yes the subject class inherits both Observable and Observer... You're welcome!

Han Che Over a year ago

I definetly need to learn more about observables but so far mostly you can find is about rxJS and HTTP, do you have any tip on where to start?

Collectives™ on Stack Overflow

angular2 data binding by using reference data types in a service

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related