Retrieve Tasks with HTTP Client

Chapter Objective

Retrieve tasks from the list using HTTP Client in an Angular application.

Update TaskService

The HttpClient service exposes several functions that allow you to make HTTP requests to a server. In this chapter, you’ll use the get method to retrieve the task list from the API server.

Note

get refers to GET requests in the HTTP protocol.

This function takes the API server route path as a parameter: http://localhost:3000/tasks. This is the URL it will query to get the list of tasks.

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

This new getTasks method defines the communication with the API server:

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

Warning

The API will be responsible for retrieving the task list and you won’t need the tasks variable in TaskService anymore. However, since some code still depends on this variable, you’ll need to keep it for now.

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

import { Injectable, signal, WritableSignal } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Task } from "./task.model";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class TaskService {
  private http = inject(HttpClient);

  tasks: WritableSignal<Task[]> = signal([
    {
      id: "1",
      title: "First task",
      description: "This is the first task in your to-do list.",
    },
    {
      id: "2",
      title: "Second task",
      description: "This is the second task in your to-do list.",
    },
  ]);

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

Update TaskList

Update TaskList to use the new getTasks method and rename the tasks variable to tasks$. Adding $ indicates that it’s an Observable.

tasks$ = this.taskService.getTasks();

Why? What is 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 an observable value, the Angular community commonly uses the $ suffix in Angular applications.

Note

An Observable observes a data stream.

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

import { Component } from "@angular/core";
import { TaskService } from "../task-service";
import { Task } from "../task.model";

@Component({
  selector: "app-task-list",
  templateUrl: "./task-list.html",
  styleUrl: "./task-list.css",
})
export class TaskList {
  private taskService = inject(TaskService);

  tasks = this.taskService.tasks;

  tasks$ = this.taskService.getTasks();
}

Subscription

Calling the getTasks function won’t trigger the API request immediately. Since it hasn’t been triggered yet, the observable won’t emit any values. Trigger what we call a subscription to the observable to start the request.

Note

You subscribe to an observable like you would subscribe to a newspaper. You request the latest issue of the newspaper. Only once it’s available, it’s delivered to you and you can read it.

There are several ways to subscribe to an observable. For the given situation, use the async pipe in the HTML Template.

Like the date pipe used previously, the role of the async pipe is to transform data before displaying it. Here its role will be to subscribe to the observable and return the list of tasks once available.

Note

Although alternatives exist, 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.

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

@for (task of tasks$ | async; track task.id ) {
<tr>
  <td>{{ task.title }}</td>
  <td>{{ task.createdAt | date}}</td>
  <td>
    <a class="btn btn-secondary m-1" [routerLink]="['/update', task.id]"
      >Update</a
    >
    <button
      class="btn btn-danger m-1"
      type="button"
      (click)="deleteTask(task.id)"
    >
      Delete
    </button>
  </td>
</tr>
}

What you've learned

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

Retrieve Tasks with HTTP Client

Update TaskService

Update TaskList

Subscription

How to subscribe?