HTTP PUT Requests

HTTP PUT requests are used to update existing resources on a server. In Angular, the HTTPClient module provides methods to make PUT requests and handle responses effectively.

Setting Up HTTPClientModule

First, import the HttpClientModule into your app module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a Service

Next, create a service to manage HTTP requests using the Angular CLI command:

$ ng generate service data

This command generates a new service file named data.service.ts.

Implementing the PUT Request

In the service file, inject the HttpClient and create a method to perform the PUT request:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  updatePost(id: number, post: any): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put(url, post);
  }
}

Using the PUT Request in a Component

Inject the service into your component's constructor and use it to perform the PUT request:

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  template: `
    Update Post
    
      
      
      
      
    
    Posts
    
      {{ post.title }}
    
  `
})
export class HomeComponent implements OnInit {
  posts: any[] = [];
  updatePost: any = { id: '', title: '', body: '' };

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }

  onSubmit() {
    this.dataService.updatePost(this.updatePost.id, this.updatePost).subscribe(updatedPost => {
      const index = this.posts.findIndex(post => post.id === updatedPost.id);
      this.posts[index] = updatedPost;
    });
  }
}

Handling Errors in PUT Requests

To handle errors in your HTTP PUT requests, use the catchError operator from RxJS:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  updatePost(id: number, post: any): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put(url, post).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    console.error('Server Error:', error);
    return throwError('Something went wrong with the request.');
  }
}

Key Points

HTTP PUT requests are used to update existing resources on a server.
Import HttpClientModule in your app module to set up the HTTP Client.
Create a service to handle HTTP PUT requests using the HttpClient.
Inject the service into your component's constructor to use it for performing HTTP PUT requests.
Handle errors using the catchError operator from RxJS.

Conclusion

HTTP PUT requests are essential for updating existing resources on a server. By setting up the HTTPClientModule and using the HTTPClient to perform PUT requests, you can efficiently manage data updates in your Angular applications. Happy coding!