Angular 6 – Send Nested Object to Spring Boot Server example

In this tutorial, we’re gonna create an Angular 6 Client App that sends nested object (complex object) to a Spring Boot Server.

Related Posts:
AngularJs POST-GET Nested Objects to SpringBoot server
Jquery Ajax POST-GET Nested Objects to SpringBoot server

Technologies

– Angular 6
– RxJS 6
– Java 1.8
– Spring Boot 2.0.4.RELEASE
– Maven 3.3.9
– Spring Tool Suite – Version 3.9.0.RELEASE

Example Overview

1. Angular 6 App Client

angular-6-send-nested-object-spring-boot-server-example-ui

The nested object will be like this:

This client sends HTTP POST to server.

2. Spring Boot Server

The goal of this server is to provide a REST API that can receive HTTP POST and show data.

angular-6-send-nested-object-spring-boot-server-controller-overview

Practice

1. Angular 6 App Client

angular-6-send-nested-object-spring-boot-server-example-angular-client-structure

Run command for generating Angular Component and Service:
ng g s customer
ng g c customer-form

1.1 App Module

app.module.ts

1.2 Customer Service

customer.service.ts

With customer interface:

1.3 Component for submitting Customer

customer-form.component.ts

customer-form.component.html

1.4 App Component

app.component.ts

app.component.html

1.5 Integrate Spring Boot Server with Angular 6 client

– Create proxy.conf.json file under project:

– Edit package.json file for “start” script:

2. Spring Boot Server

angular-6-send-nested-object-spring-boot-server-example-spring-server-structure

2.1 Create Spring Boot project

With Dependency:

2.2 Create Data Model

model/Address.java

model/Customer.java

2.3 Create Controller

controller/CustomerController.java

Check Results

Run Spring Boot Server and Angular 6 Client App (npm start), go to http://localhost:4200/:

angular-6-send-nested-object-spring-boot-server-example-ui

Click Submit button to send Customer Data, check Server Console:

Check Browser Console:

angular-6-send-nested-object-spring-boot-server-example-angular-client-result

Sourcecode

Angular6SendObject
SpringBootRestObject

By grokonez | August 9, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*