PUT and DELETE requests in Angular - Mini Project: Build & Apply

PUT and DELETE requests in Angular

📖 Scenario: You are building a simple Angular app to manage a list of books. You want to update book details and delete books from the list by sending requests to a server.

🎯 Goal: Build an Angular component that can send PUT requests to update a book's title and DELETE requests to remove a book from the server.

📋 What You'll Learn

Create a list of books with id and title

Add a variable to hold the API base URL

Write a method to send a PUT request to update a book's title

Write a method to send a DELETE request to remove a book by id

💡 Why This Matters

🌍 Real World

Managing data on a server is common in web apps. PUT and DELETE requests let you update and remove data remotely.

💼 Career

Understanding how to use Angular's HttpClient for PUT and DELETE requests is essential for frontend developers working with REST APIs.

1

Create the initial books list

Create a variable called books in the component class. It should be an array of objects with these exact entries: { id: 1, title: 'Angular Basics' }, { id: 2, title: 'TypeScript Guide' }, and { id: 3, title: 'RxJS in Depth' }.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  // Create the books array here
}

Need a hint?

Use an array of objects with id and title properties exactly as shown.

2

Add the API base URL

Add a string variable called apiUrl in the component class and set it to 'https://api.example.com/books'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular Basics' },
    { id: 2, title: 'TypeScript Guide' },
    { id: 3, title: 'RxJS in Depth' }
  ];

  // Add the apiUrl variable here
}

Need a hint?

Just add a string variable with the exact URL given.

3

Write the method to update a book with PUT

Add a method called updateBook that takes a book object as a parameter. Inside, use Angular's HttpClient to send a PUT request to `${this.apiUrl}/${book.id}` with the book object as the body. Assume HttpClient is injected as http. The method should return the observable from http.put.

Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular Basics' },
    { id: 2, title: 'TypeScript Guide' },
    { id: 3, title: 'RxJS in Depth' }
  ];

  apiUrl = 'https://api.example.com/books';

  constructor(private http: HttpClient) {}

  // Add updateBook method here
}

Need a hint?

Use template strings for the URL and return the observable from http.put.

4

Write the method to delete a book with DELETE

Add a method called deleteBook that takes a bookId number as a parameter. Inside, use Angular's HttpClient to send a DELETE request to `${this.apiUrl}/${bookId}`. Assume HttpClient is injected as http. The method should return the observable from http.delete.

Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular Basics' },
    { id: 2, title: 'TypeScript Guide' },
    { id: 3, title: 'RxJS in Depth' }
  ];

  apiUrl = 'https://api.example.com/books';

  constructor(private http: HttpClient) {}

  updateBook(book: { id: number; title: string }) {
    return this.http.put(`${this.apiUrl}/${book.id}`, book);
  }

  // Add deleteBook method here
}

Need a hint?

Use template strings for the URL and return the observable from http.delete.