How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

https://ozenero.com/use-angular-httpclient-post-put-delete-data-springboot-rest-apis-angular-4

How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

With previous posts, we had done 2 important things: fetching data from remote server by Angular HttpClient, and navigate among views by Angular Routing.

In this tutorial, we'll go to next step - work with Rest APIs: How to use Angular HttpClient to POST, PUT & DELETE data on SpringBoot RestAPI Services.

Related Articles:

• How to work with Angular Routing – Spring Boot + Angular 4
• How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
• Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server
• Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4

II. Overview

For POST, PUT, DELETE data, We use Angular HTTP Client methods:

• post(url: string, body: any, options?: RequestOptionsArgs): Observable
• put(url: string, body: any, options?: RequestOptionsArgs): Observable
• delete(url: string, options?: RequestOptionsArgs): Observable

Detail implementation:

create(customer: Customer): Promise {
  ...
  return this.http.post(this.customersUrl, JSON.stringify(customer), {headers: this.headers})
  ...
}

update(customer: Customer): Promise {
  ...
  return this.http.put(url, JSON.stringify(customer), {headers: this.headers})
  ...
}

delete(id: number): Promise {
  ...
  return this.http.delete(url, {headers: this.headers})
  ...
}

More at:

https://ozenero.com/use-angular-httpclient-post-put-delete-data-springboot-rest-apis-angular-4

How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4