Service injection and accessing data in Angular

Question

I am quite new to angular, and whilst what I am doing now works, not sure if I am following best practices. Scenario:

• Employee service: handles all the calls to the backend (getEmployees, getEmployee(id), saveEmployee(employee))
• Employees components: lists all employees (with ngFor)
• Employee component: shows data of selected employee once selected from the list (with two way binding), allows editing, etc. If saved, then both getEmployees (to reload the list) and getEmployee(to reload the selected employee) would be called.

Question is, I found two ways to access the data I get from the backend in the service and both seem to work:

1. get and store the data in the service. In the component constructor I add the service as public and in the template I then can directly access the data variables from the service.
2. get the data in the service, but rather than storing it there, I use a subject. In the component I add the service as private, subscribe to employees and employee and store the data in the component itself.

While option 1 require less code, I am under the impression that the proper way of doing this is option 2. However I am not quite sure if that is correct, and if so, why? I believe I am lacking some basic knowledge here when it comes to how angular handles updates to the dom when the data is being reloaded, refreshed from the backend.

Any help would be appreciated, Thank you

Answer 1

Actually if you only want to view the data, you event do not need to store the data locally, you can define an observable(http observable) in service, and use it in component, and use async pipe on template.

template:

{{ employees$ | async }}