Modify Task Update with HTTP Client

Chapter Objectives

• ✔️
  Modify Task Update with HTTP Client

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

In addition to targeting task updates rather than creation, this lesson will be quite similar to the previous one:

• You will update TaskService
• You will update TaskFormComponent while paying attention to the asynchronous HTTP request.

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 API server URL; This URL will include the ID of the task to update: http://localhost:3000/tasks/${task.id}
2. The task object to send to the server

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

🎓 Instructions

1. Modify 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) {}
   
     getTask(id: string) {
       return this.http.get<Task>(`http://localhost:3000/tasks/${id}`);
     }
   
     updateTask(task: Partial<Task>, id: string) {
       return this.http.patch<Task>(`http://localhost:3000/tasks/${id}`, task);
     }
   }

Retrieving the Task to Update

You just updated the getTask function to retrieve a specific task. Like the previously changed functions to communicate with the API, this function will now alter the existing code in the TaskFormComponent. While the function name doesn’t change, you’ll now need to subscribe to get its value.

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');

    if (id) {
      this.taskService.getTask(id).subscribe(task => {
        this.task = task;
      });
    }
  }

🎓 Instructions

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

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute, 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 {
       task: TaskForm = { id: '', title: '', description: '' };
   
       constructor(private taskService: TaskService, private router: Router, private route: ActivatedRoute) { }
   
       ngOnInit() {
           const id = this.route.snapshot.paramMap.get('id');
   
           if (id) {
               this.taskService.getTask(id).subscribe(task => {
                   this.task = task;
               });
           }
       }
   }

TaskFormComponent

Modify TaskFormComponent to use the new function. The simplest way would be to apply the same logic as in the previous lesson, updating the submit function to make an API call and navigate to the list page.

This would give the following code:

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

This works but it’s not the best way to proceed as we’re duplicating the navigation logic. If the list page path changes, we would need to update it in two places. Handle it by modifying the submit function:

• Create a variable whose value will be either the updateTask or addTask function. Its value will therefore be an Observable that you can subscribe to.
• Subscribe to this variable and navigate to the list page.

🎓 Instructions

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

   import { Component } 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 {
     constructor(private taskService: TaskService, private router: Router) {}
   
     submit() {
       const id = this.route.snapshot.paramMap.get("id");
       const taskObservable = id
         ? this.taskService.updateTask(task, id)
         : this.taskService.addTask(task);
   
       taskObservable.subscribe(() => {
         this.router.navigate(["/"]);
       });
     }
   }

✔️ What You Have Learned

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