Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4

Tags: angular6, springboot, restapi
Published: 2021-04-04 11:01:18

https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-get-post-put-delete-requests-springboot-restapis-bootstrap-4

Angular provides the <code>HttpClient</code> in <code>@angular/common/http</code> for front-end applications communicate with backend services. In the tutorial, we show how to build an Angular application that uses the <code>HttpClient</code> to make <code>get/post/put/delete</code> requests with <code>Observable</code> apis to SpringBoot RestAPIs.

Related posts:
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-service-with-observable-data-for-asynchronous-operation">Angular 6 Service – with Observable Data for Asynchronous Operation</a>
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-routing-navigation-with-angular-router-service">Angular 6 Routing/Navigation – with Angular Router Service</a>
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-template-driven-form-ngmodel-for-two-way-data-binding">Angular 6 Template Driven Form – NgModel for Two-Way Data Binding</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Java 1.8</li>
<li>Maven 3.3.9</li>
<li>Spring Tool Suite – Version 3.9.4.RELEASE</li>
<li>Spring Boot: 2.0.3.RELEASE</li>
<li>Angular 6</li>
<li>RxJS 6</li>
<li>Bootstrap 4</li>
<li>Visual Studio Code – version 1.24.0</li>
</ul>
<h2>Overview</h2>
<h3>Goals</h3>
We create 2 projects:

- Angular Client Project:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-angular-6-project-structure.png" alt="angular-6-http-client-get-post-put-delete-request + angular-6-project-structure" width="206" height="527" class="alignnone size-full wp-image-13346" />

- SpringBoot Server Project:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-spring-boot-rest-apis.png" alt="angular-6-http-client-get-post-put-delete-request + spring-boot-rest-apis" width="301" height="162" class="alignnone size-full wp-image-13347" />

<strong>Overview</strong>

<img src="https://grokonez.com/wp-content/uploads/2018/06/springboot-rest-apis-angular-6-http-client-angular-http-service-architecture.png" alt="springboot-rest-apis +angular-6-http-client +angular-http-service-architecture" width="570" height="542" class="alignnone size-full wp-image-13348" />

<strong>UserCase</strong>

- Retrieve all customers from SpringBoot server:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-retrieve-all-customer-angular-http-client-get-request.png" alt="angular-6-http-client-get-post-put-delete-request + retrieve-all-customer-angular-http-client-get-request" width="404" height="383" class="alignnone size-full wp-image-13349" />

- Update a customer -> Change the <code>firstname</code> of first customer: <em>'Joe'</em> to <em>'Robert'</em>.

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-upadate-joe-to-robert-angular-http-client-update.png" alt="angular-6-http-client-get-post-put-delete-request + upadate-joe-to-robert-angular-http-client-update" width="429" height="504" class="alignnone size-full wp-image-13352" />

-> result:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-press-update-button.png" alt="angular-6-http-client-get-post-put-delete-request + press-update-button" width="417" height="283" class="alignnone size-full wp-image-13350" />

- Delete <em>'Peter'</em> customer:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-angular-http-client-delete.png" alt="angular-6-http-client-get-post-put-delete-request + angular-http-client-delete" width="426" height="279" class="alignnone size-full wp-image-13351" />

- Add a new customer:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-angular-http-client-post-a-customer.png" alt="angular-6-http-client-get-post-put-delete-request + angular-http-client-post-a-customer" width="419" height="494" class="alignnone size-full wp-image-13353" />

-> result:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-angular-http-post-a-customer.png" alt="angular-6-http-client-get-post-put-delete-request + angular-http-post-a-customer" width="422" height="282" class="alignnone size-full wp-image-13354" />

-  Check final customer's list:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-final-check.png" alt="angular-6-http-client-get-post-put-delete-request + final-check" width="413" height="367" class="alignnone size-full wp-image-13355" />

More at: https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-get-post-put-delete-requests-springboot-restapis-bootstrap-4