Kotlin Spring Boot + Angular 6 CRUD + PostgreSQL example | Spring Data JPA + REST APIs example

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with PostgreSQL and Angular 6 as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA with PostgreSQL | Spring Boot
Spring JPA + PostgreSQL + AngularJS example | Spring Boot
Kotlin Spring JPA + Postgresql | Spring Boot Example
Kotlin RequestMapping RESTful APIs with @GetMapping, @PostMapping, @PutMapping, @DeleteMapping
Kotlin SpringJPA Hibernate One-To-Many relationship

Related Pages:

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.3.RELEASE
– Angular 6
– RxJS 6

II. Overview

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + angular-http-service-architecture

1. Spring Boot Server

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + spring-server-architecture

2. Angular 6 Client

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql + angular-client-architecture

III. Practice

1. Project Structure

1.1 Spring Boot Server


Customer class corresponds to entity and table customer.
CustomerRepository is an interface extends CrudRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAllCustomers, postCustomer, deleteCustomer, deleteAllCustomers, findByAge, updateCustomer.
– Configuration for Spring Datasource and Spring JPA properties in application.properties
Dependencies for Spring Boot and PostgreSQL in pom.xml

1.2 Angular 6 Client

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + angular-client-structure

In this example, we focus on:
– 4 components: customers-list, customer-details, create-customer, search-customer.
– 3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
customer.service.ts: Service for Http Client methods

2. How to do

2.1 Kotlin Spring Boot Server
2.1.1 Dependency

2.1.2 Customer – Data Model


2.1.3 JPA Repository


2.1.4 REST Controller


2.1.5 Configuration for Spring Datasource & JPA properties


2.2 Angular 6 Client
2.2.0 Create Service & Components

Run commands below:
ng g s Customer
ng g c CreateCustomer
ng g c CustomerDetails
ng g c CustomersList
ng g c SearchCustomers
On each Component selector, delete app- prefix, then change tslint.json rules"component-selector" to false.

2.2.1 Model


2.2.2 CustomerService


2.2.3 Components

– CustomerDetailsComponent:


– CustomersListComponent:


– CreateCustomerComponent:


– SearchCustomersComponent:


2.2.4 AppRoutingModule


And AppComponent HTML for routing:

2.2.5 AppModule


3. Run & Check Result

Build and Run Spring Boot project with commandlines: mvn clean install and mvn spring-boot:run.
– Run the Angular App with command: ng serve.

– Open browser for url http://localhost:4200/:
Add Customer:


Show Customers:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + show-customers

Click on Active button to update Customer status:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database +update-customers

Search Customers by Age:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + search-customers

Delete a Customer:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + delete-customer

Delete All Customers:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + delete-all-customers

IV. Source Code


By grokonez | August 16, 2018.

Related Posts

3 thoughts on “Kotlin Spring Boot + Angular 6 CRUD + PostgreSQL example | Spring Data JPA + REST APIs example”

  1. This example is awesome, but when i try to deply this on heroku I had this error:

    Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

    Google says that you can change this when you uses express, but this does not case.

    So how can I make it works on heroku

  2. Hello grokonez

    I can do that it works on Heroku, but page show up without stiles and when i review that file is empty from source.

    What do you this could be the issue?


Got Something To Say:

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