Search code examples
data-bindingangularangular2-servicestwo-way

angular2 data binding between service and component properties


I need some clarification on binding between service and component properties and data binding in angular2

assume i have a service(singleton) and a component

export class Service {
 name = "Luke";
 object = {id:1};
 getName(){return this.name};
 getObject(){return this.object};
}

export class Component implements OnInit{
 name:string;
 object:any;
 constructor(private _service:Service){}
 ngOnInit():any{

   //Is this 2 way binding?
   this.name = this._service.name;
   this.object = this._service.object;

   //Is this copying?
   this.name = this._service.getName();
   this.object = this._service.getObject();
  }
}

Solution

  • If you update elements by reference (if you update something into the object property), you will see the updates in the view:

    export class Service {
      (...)
    
      updateObject() {
        this.object.id = 2;
      }
    }
    

    If you update elements by value (if you update something into the name property), you won't see the updates in the view:

    export class Service {
      (...)
    
      updateName() {
        this.name = 'Luke1';
      }
    }
    

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