Angular 4 – Send Nested Object to Spring Boot Server

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

AngularJs POST-GET Nested Objects to SpringBoot server
Jquery Ajax POST-GET Nested Objects to SpringBoot server

I. Technologies

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

II. Overview

1. Angular 4 App Client

angular-4-send-nested-object-spring-boot-server-overview

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-4-send-nested-object-spring-boot-server-controller-overview

III. Practice

1. Angular 4 App Client

angular-4-send-nested-object-spring-boot-server-client-structure

1.1 App Module

1.2 Customer Service

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 4 client

– Create proxy.conf.json file under project:

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

2. Spring Boot Server

angular-4-send-nested-object-spring-boot-server-structure

2.1 Create Spring Boot project

With Dependency:

2.2 Create Data Model

2.3 Create Controller

3. Check Results

Run Spring Boot Server and Angular 4 Client App, go to http://localhost:4200/:
angular-4-send-nested-object-spring-boot-server-overview

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

Check Browser Console:
angular-4-send-nested-object-spring-boot-server-client-result

IV. Sourcecode

Angular4SendObject
SpringRestObject


Related Posts


3 thoughts on “Angular 4 – Send Nested Object to Spring Boot Server”

    1. my spring boot server is running at localhost:8080 i have followed all the description written here but my proxy is not working, though i am able to run the project when i built with ng build and run from spring project. but running both of them simultaneously proxy configuration is not working.

      1. Hi Mash,

        In package.json, we configure:

        I think you should follow the step Integrate_Spring_Boot_Server_with_Angular_4_client.

        If you still have problem, just notice us again with your Angular Project terminal log.

        Best Regards,
        JSA.

Got Something To Say:

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

*