Retrieve the task list

• ✔️
  Retrieve tasks

  Retrieve the list of tasks from the fake API server

Update the TaskService

The HttpClient service exposes multiple functions to make HTTP requests to a server. In this chapter, we will use its get function to query the task list from the API server.

Note

get refers to GET requests in the HTTP protocol.

This function takes the API server endpoint as a parameter: http://localhost:3000/tasks. That’s the URL it’ll query to get the task list.

getTasks() {
  return this.http.get<Task[]>('http://localhost:3000/tasks');
}

This new getTasks defines the contract with the API server:

• it makes a GET request
• it expects an array of Task objects as a response
• it communicates with the API server at http://localhost:3000/tasks URL.

Caution

As we are now querying the task list from the API server, the tasks variable is no longer needed in the TaskService class. However as some code still depends on it, we will keep it for now.

🎓 Instructions

1. Update the src/app/task.service.ts file.

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Task } from './task.model';
   
   @Injectable({
       providedIn: 'root'
   })
   export class TaskService {
   
       constructor(private http: HttpClient) { }
   
       getTasks() {
           return this.http.get<Task[]>('http://localhost:3000/tasks');
       }
   }

Update the TaskListComponent

Let’s update the TaskListComponent to use this new getTasks function and rename the tasks variable to tasks$ to reflect the fact that it is now an Observable.

tasks$ = this.taskService.getTasks();

Why so? What’s an Observable?

tasks was an array of Task objects. Now, tasks$ is an Observable of an array of Task objects.

By calling the getTasks function, we get an Observable that will emit the list of tasks once received from the API server. To differentiate a value from the observable, the Angular community commonly use the $ suffix in Angular applications.

Note

An Observable observes a stream of data.

🎓 Instructions

1. Update the the src/app/task-list/task-list.component.ts file.

   import { Component, OnInit } from '@angular/core';
   import { TaskService } from '../task.service';
   import { Task } from '../task.model';
   
   @Component({
       selector: 'app-task-list',
       templateUrl: './task-list.component.html',
       styleUrls: ['./task-list.component.css']
   })
   export class TaskListComponent implements OnInit {
   
       tasks: Task[] = this.taskService.tasks;
   
       tasks$ = this.taskService.getTasks();
   
       constructor(private taskService: TaskService) { }
   
       ngOnInit() {}
   }

Subscription

Calling the getTasks function won’t trigger the API request immediately and as it’s not trigger yet, the observable won’t emit any value. Let’s trigger what we call a subscription to the observable to start the request.

Tip

We subscribe like we would subscribe to a newspaper. We request the last issue of the newspaper and only once it’s available, it’s delivered and we can read it.

How to subscribe

There are multiple ways to subscribe to an observable. For the given situation, Let’s use the async pipe in the HTML template.

Like the date pipe used earlier, the async pipe role is to transform the data before displaying it. Here it’s role will be to subscribe to the observable and returns the list of tasks once available.

Tip

While there are alternatives, the async pipe is the recommended way to subscribe to an observable in the HTML template. You’ll discover the alternative at the end of this page.

🎓 Instructions

1. Update the the src/app/task-list/task-list.component.html file.

   <tr *ngFor="let task of tasks$ | async">
       <td>{{ task.title }}</td>
       <td>{{ task.createdAt | date }}</td>
       <td>
           <a class="btn btn-primary" [routerLink]="['/update', task.id]">Mettre à jour</a>
           <button class="btn btn-danger" type="button" (click)="deleteTask(task.id)">Supprimer</button>
       </td>
   </tr>

Alternative

The alternative to using the async pipe is to subscribe to the observable in the component.

This is done by calling the subscribe function on the observable and passing a function as a callback parameter. This callback will be called once the data is available.

This subscription will be used in the ngOnInit function of the TaskListComponent class.

🎓 Instructions

1. Update the the src/app/task-list/task-list.component.ts file.

   import { Component, OnInit } from '@angular/core';
   import { TaskService } from '../task.service';
   import { Task } from '../task.model';
   
   @Component({
       selector: 'app-task-list',
       templateUrl: './task-list.component.html',
       styleUrls: ['./task-list.component.css']
   })
   export class TaskListComponent implements OnInit {
       tasks: Task[] = this.taskService.tasks;
   
       constructor(private taskService: TaskService) { }
   
       ngOnInit() {
           this.taskService.getTasks().subscribe(tasks => this.tasks = tasks);
       }
   }

Pitfalls

While subscribing to the observable in the component is a valid solution, it misses some optimizations that the async pipe provides. It also requires more code for the same result.

✔️ What you learned

In this chapter, you learned one of the key features of Angular: how to query data from an API server!