Angular 5 - Data Change in Service doesn't reach Component

Question

I have a shared-data.service.ts with some private properties, e.g.:

private _selectedId: string;

get selectedId(): string {
  return this._selectedId;
}

set selectedId(value: string) {
  this._selectedId = value;
}

I invoked this service in a component list.component.ts as a public object and used it directly in the component.

constructor(public sharedDataService: SharedDataService) {}
...
list: Defect[] = this.sharedDataService.getDefects(this.sharedDataService.selectedId)

Furthermore I used the service directly in the .html file of the component, i.e. list.component.html: <div>{{sharedDataService.selectedId}}</div>

---

When I now update the value of _selectedId in the service via another component I have the following problem:

• list: Defect[] doesn't get updated
• but in list.component.html the content of the <div> elem will be updated.

Why do the html part get the update, but list: Defect[] doens't get the update ?

Answer 1

The instruction in your component is executed once, and only once, when the component is constructed. The list of defects is thus initialized at construction time, and has no reason to change. To change, the component would have to be aware that the selected ID has changed, and would have to call getDefects() again, and set the value of this.list again.

The expression sharedDataService.selectedId in your template, on the other hand, is reevaluated at each change detection of angular. So, every time some event is triggered, Angular reevaluates this expression, tests if it has a value that is different from before, and updates the DOM accordingly.

To refresh the list in the component, setting the selected ID should emit an event from an observable, that the component subscribes to, in order to refresh the list. As explained here: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

Your view gets update because the lifecycle of your component is calling the method that gets the id every time that your move the mouse (print a console.log inside get selectedId() method... you will see ). and the list assignation is called only one time (I assume is in ngOnInit() ), you have to choices:

• (the most ugly one ) Move the assignation of your list to ngOnChanges(changes: SimpleChanges) {} method. with that approach maybe your list will have the data that you want..
• Use a subject to manage the Id in your service and subscribe to the data id in your component