[Solved] What is the best practice in Angular 8 to consume data from service?

Question

The answer as to how to handle data between components in Angular is: use a service

https://angular.io/guide/architecture-services

The angular team maintains as really good tutorial called Tour of heroes, where they provide developers with a great intro to the angular architecture and its main data workflows. I specially recommend people to finish the last chapter, which is about data handling.

To answer your question, in summary, from the service you should not subscribe to the calls to endpoints. in your service, create the functions like this:

...
public getUsers(){
   return this.http.get(‘/users’)
 }
...

In your components you create Observables to the service data like this:

export class UsersComponent implements OnInit {
...
public usersList$ = this.apiService.getUsers();

...
}

and on its component template (notice the async pipe there), angular will do the subscription for you when you use the appropriate pipes:
(i am assuming your user model has a name and email attributes on it, just for the sake of showing data)

<div *ngFor="let user of usersList$ | async">
  <div> {{ user.name }} </div>
  <div> {{ user.email }} </div>
</div>

Accepted Answer