Angular 4 + Spring WebFlux + Spring Data Reactive MongoDB example | Full-Reactive Angular 4 Http Client – Spring Boot RestApi Server

In this tutorial, we’re gonna build a full Reactive Application in which, Spring WebFlux, Spring Data Reactive MongoDB are used for backend, and Angular, RxJS, EventSource are on client side.

Related Posts:
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4
How to build SpringBoot MongoDb RestfulApi
How to use SpringData MongoRepository to interact with MongoDB
Angular 4 + Spring Boot + MongoDB CRUD example
Introduction to RxJS – Extensions for JavaScript Reactive Streams

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Spring Boot 2.0.0.RELEASE
– Angular 4
– RxJS 5.1.0
– MongoDB 3.4.10

II. Overview

1. Full Stack Architecture


2. Reactive Spring Boot Server

2.1 Dependency

2.2 Reactive Repository

We just need to create an interface that extends ReactiveCrudRepository to do CRUD operations for a specific type. This repository follows reactive paradigms and uses Project Reactor types (Flux, Mono) which are built on top of Reactive Streams.

2.3 Activate reactive Spring Data MongoDB

Support for reactive Spring Data is activated through an @EnableReactiveMongoRepositories annotation:

2.4 Call Reactive Repository

We can forward the reactive parameters provided by Spring Web Reactive, pipe them into the repository, get back a Flux/Mono and then work with result in reactive way.

In the rest controller methods which are annotated by @RequestMapping, we have used some methods of autowired repository which are implemented interface ReactiveCrudRepository:

And findByName method that we create in our interface ReactiveCustomerRepository:

Remember that we want to connect to backend from a client application deployed in a different port, so we must enable CORS using @CrossOrigin annotation.

3. Reactive Angular Client

3.1 Reactive Service

This service interacts with the backend using Server-Sent Events.

Whenever we receive an event through the EventSource object, onmessage() is invoked. That’s where we parse data and update item list.

Using RxJS Observable object, any Observer that subscribed to the Observable we created can receive events when the item list gets updated (when calling

3.2 Reactive Component

This Component calls Service above and keep result inside an Observable object:

In HTML template, we add async pipe that subscribes to the Observable and update component whenever a new event comes:

III. Practice

1. Reactive Spring Boot Server

1.1 Project Structure


– Class Customer corresponds to document in customer collection.
ReactiveCustomerRepository is an interface extends ReactiveCrudRepository, will be autowired in CustomerController for implementing repository methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAll, create, update, delete Customers.
– Configuration for Spring Data MongoDB properties in
– Dependencies for Spring Boot WebFlux and Spring Data MongoDB in pom.xml

1.2 Dependency

1.3 Data Model

1.4 Reactive Repository

1.5 Enable reactive Spring Data MongoDB

1.6 REST Controller

To make the result live, we use delayElements(). It causes a delayed time between 2 events.

1.7 Configuration for Spring Data MongoDB

2. Reactive Angular Client

2.1 User Interface


2.2 Project Structure


In this example, we have:
– 4 components: customers-list, customer-details, create-customer, search-customers.
– 3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, name, age, active).
customer.service.ts: Service for HttpClient methods.

2.3 AppModule


2.4 Model


2.5 Service


2.6 Components
2.6.1 CustomerDetailsComponent



2.6.2 CustomersListComponent



2.6.3 CreateCustomerComponent



2.6.4 SearchCustomersComponent



2.7 AppRoutingModule


2.8 App Component



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: npm start.

– Open browser with url http://localhost:4200/, add some Customers.
– Click on Customers tab, each Customer displays one after another with 1s delayed time.


– Click on Search tab, search ‘Jack’, the result shows each Customer one after another with 1s delayed time.


IV. Source Code


By grokonez | March 15, 2018.

Related Posts

2 thoughts on “Angular 4 + Spring WebFlux + Spring Data Reactive MongoDB example | Full-Reactive Angular 4 Http Client – Spring Boot RestApi Server”

Got Something To Say:

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