angular http PUT

Angular HTTP PUT Request#

When working with Angular, there are many HTTP methods that you can use to communicate with a backend API. One of these methods is PUT, which is used to update an existing resource on the server. In this article, we will discuss how to use the Angular HttpClient module to send a PUT request.

How to make a PUT request in Angular?#

To make a PUT request in Angular, you first need to import the HttpClient module from '@angular/common/http'. This module provides a set of powerful APIs to communicate with the server.

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

constructor(private http: HttpClient) {}

Once you have imported the HttpClient module, you can use the 'put' method to send a PUT request to the server. The 'put' method takes two arguments: the URL of the resource you want to update and the data you want to send in the request body.

updateResource(url: string, data: any) {
  return this.http.put(url, data);
}

You can also pass additional options as the third argument to the 'put' method. For example, you can set headers or observe the response of the request.

const options = {
  headers: {'Content-Type': 'application/json'},
  observe: 'response'
};

updateResource(url: string, data: any) {
  return this.http.put(url, data, options);
}

Example#

Let's say we have an API that allows us to update a user. We can create a UserService that calls the 'updateResource' method to update the user.

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

@Injectable()
export class UserService {
  private apiUrl = 'https://example.com/api/users/';

  constructor(private http: HttpClient) {}

  updateUser(user: any) {
    const url = this.apiUrl + user.id;
    return this.http.put(url, user);
  }
}

Now we can use the UserService to update a user in our component:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: '
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="user.name" name="name">
      <input [(ngModel)]="user.email" name="email">
      <button type="submit">Update User</button>
    </form>
  '
})
export class AppComponent {
  user = { id: 1, name: 'John Doe', email: 'john@example.com' };

  constructor(private userService: UserService) {}

  onSubmit() {
    this.userService.updateUser(this.user).subscribe(
      response => console.log('User updated successfully.'),
      error => console.log('An error occurred while updating user.')
    );
  }
}

When the user clicks the 'Update User' button, the form data is sent to the server using a PUT request. The server updates the user and returns a response, which is logged to the console.

Conclusion#

In this article, we have learned how to use the Angular HttpClient module to send a PUT request to update a resource on the server. We have also seen how to pass additional options to the 'put' method and how to handle the response of the request. I hope this article has been helpful in understanding how to use the HttpClient module in Angular.