Fazendo método http delete e seu component de manipulação

Author: LuizCarlosVilela

src/app/courses/course-list.component.html

@@ -36,7 +36,8 @@ <h2>Course List</h2>
                 <app-star [rating]="course.rating"></app-star>
             </td>
             <td>
-                <a [routerLink]="['/courses/info', course.id]" class="btn btn-primary">Edit</a>
+                <a [routerLink]="['/courses/info', course.id]" class="btn btn-primary mr-2">Edit</a>
+                <button (click)="deleteById(course.id)" class="btn btn-danger">Delete</button>
             </td>
         </tr>
     </tbody>

src/app/courses/course-list.component.ts

@@ -18,6 +18,18 @@ export class CourseListComponent implements OnInit {
     this.retriveAll();
   }
 
+  deleteById(courseId: number): void {
+    this.courseService.deleteById(courseId).subscribe({
+      next: (msg) => {
+        console.log('Deleted with sucess');
+        this.retriveAll();
+      },
+      error: (msg) => {
+        console.log('Deleted with error: ', msg);
+      },
+    });
+  }
+
   retriveAll(): void {
     this.courseService.retriveAll().subscribe({
       next: (courses) => {

src/app/courses/course.service.ts

@@ -29,6 +29,10 @@ export class CourseService {
       return this.httCliente.post<Course>(`${this.courseUrl}`, course);
     }
   }
+
+  deleteById(id: number): Observable<any> {
+    return this.httCliente.delete<any>(`${this.courseUrl}/${id}`);
+  }
 }
 
 var COURSES: Course[] = [