How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4
Tags: angular, springboot, restapi, crud
Published: 2021-05-14 10:49:16

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: <a href="https://ozenero.com/spring-framework/spring-boot/use-angular-http-client-fetch-data-springboot-restapi">fetching data from remote server by Angular HttpClient</a>, and <a href="https://ozenero.com/spring-framework/spring-boot/work-angular-routing-spring-boot-angular-4">navigate among views by Angular Routing</a>.

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

Related Articles:
- <a href="https://ozenero.com/spring-framework/spring-boot/work-angular-routing-spring-boot-angular-4">How to work with Angular Routing – Spring Boot + Angular 4</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/use-angular-http-client-fetch-data-springboot-restapi">How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-postgresql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-mysql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>

<!--more-->
<iframe width="853" height="480" src="https://www.youtube.com/embed/XgWRKT2SRac?rel=0" frameborder="0" allowfullscreen></iframe>
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: RELEASE
– Angular 4
<h2>II. Overview</h2>
For <strong>POST</strong>, <strong>PUT</strong>, <strong>DELETE</strong> data, We use <strong>Angular HTTP Client</strong> methods:

- post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
- put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
- delete(url: string, options?: RequestOptionsArgs): Observable<Response>

Detail implementation: 

<pre><code class="language-javascript">
create(customer: Customer): Promise<Customer> {
  ...
  return this.http.post(this.customersUrl, JSON.stringify(customer), {headers: this.headers})
  ...
}

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

delete(id: number): Promise<void> {
  ...
  return this.http.delete(url, {headers: this.headers})
  ...
}
</code></pre>

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