Update task with the HTTP client

• ✔️
  Update a task with the HTTP client

  Learn how to update a task to a list using the HTTP client in an Angular application.

Besides targeting the update of a task rather than its creation, this lesson will be quite similar to the previous one:

• you will update the TaskService
• you will update the TaskFormComponent by caring about the asynchronous nature of the HTTP request

The TaskService

Based on the HTTP protocol, you will use the put function to add a task to the list: http.put(). This function expects 2 parameters:

1. The URL of the API server, this URL will include the task id to update: http://localhost:3000/tasks/${task.id}
2. The task to send to the server

updateTask(task: Task) {
  return this.http.patch<Task>(`${http://localhost:3000/tasks/${task.id}}`, task);
}

🎓 Instructions

1. Update the task.service.ts file.

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Task, TaskForm } from './task.model';
   
   @Injectable({
       providedIn: 'root'
   })
   export class TaskService {
       constructor(private http: HttpClient) { }
   
       updateTask(task: Task) {
           return this.http.patch<Task>(`${http://localhost:3000/tasks/${task.id}}`, task);
       }
   }

Update the TaskFormComponent

Let’s update the TaskFormComponent to use this new function. Th easiest way to do so would be to apply the same logic as in the previous lesson, by updating the submit function to make an API call and navigate to the list page. It would result in the following code:

submit(task: TaskForm) {
    if (task.id) {

        this.taskService.updateTask(task).subscribe(() => {
            this.router.navigate(['/']);
        });
    } else {
        this.taskService.addTask(task).subscribe(() => {
            this.router.navigate(['/']);
        });
    }
}

It works but it’s not the best way to do it as we are duplicating the navigation logic. If the list page path changes, we will have to update it in two places. Let’s handle it by changing the submit function:

• create a variable whose value will be either the updateTask or addTask function, its value will be an Observable you can subscribe to.
• subscribe to this variable and navigate to the list page.

🎓 Instructions

1. Update the task-form.component.ts file.

   import { Component, OnInit } from '@angular/core';
   import { Router } from '@angular/router';
   import { TaskForm } from '../task.model';
   import { TaskService } from '../task.service';
   
   @Component({
       selector: 'app-task-form',
       templateUrl: './task-form.component.html',
       styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent implements OnInit {
       constructor(private taskService: TaskService, private router: Router) { }
   
       submit(task: TaskForm) {
           const taskObservable = task.id ? this.taskService.updateTask(task) : this.taskService.addTask(task);
   
           taskObservable.subscribe(() => {
               this.router.navigate(['/']);
           });
       }
   }

✔️ What you learned

You learned how to send a PUT request with HttpClient to update a task in an Angular application.