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();
}
}
Angular binding only works for bindings declared in the view (HTML).
If you want properties in your component being updated when values in a service change, you need to take care of it yourself.
Observables make this easy. See detect change of nested property for component input for an example.
If you update elements by reference (if you update something into the
object
property), you will see the updates in the view:If you update elements by value (if you update something into the
name
property), you won't see the updates in the view:See this plunkr: https://plnkr.co/edit/w7bS0fAVjOc3utnpD39b?p=preview.
If you want properties in a component updates as soon as a value in change in a service changes:
DoCheck
from@angular/core
and yourservice
into the component.ngDoCheck(){...}
Something like this in your component: