Angular 8 + Spring Boot + MongoDB example: full-stack CRUD Application

In this tutorial, I will show you way to build a full stack Angular 8 + Spring Boot + MongoDB example with a CRUD Application. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data MongoDB for interacting with MongoDB database. Front-end side is made with Angular 8, HTTPClient & Router.

Newer version: Angular 10 + Spring Boot + MongoDB example: CRUD Application

More Practice:
Angular 8 + Spring Boot: JWT Authentication with Spring Security example
Angular 8 + Spring Boot + PostgreSQL example: CRUD App
Angular 8 + Spring Boot: File upload example
Angular 8 + Spring Boot: Pagination example

Angular 8 Firebase CRUD Realtime DB | AngularFireDatabase

Angular 8 & Spring Boot MongoDB CRUD example

We will build a full-stack Tutorial Application in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

The images below shows screenshots of our System.

– Add Tutorial:


– Retrieve all Tutorials:


– Click on Edit button to update a Tutorial:


On this Page, you can:

  • change status to Published using Publish button
  • delete the Tutorial using Delete button
  • update the Tutorial details with Update button


– Search Tutorials by title:


– Check MongoDB Database:


Angular 8 & Spring Boot Architecture

This is the application architecture we will build:


– Spring Boot exports REST Apis using Spring Web MVC & interacts with MongoDB Database using Spring Data MongoDB
– Angular Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Angular Router for navigating to pages.

Spring Boot Back-end


These are APIs that Spring Boot App will export:

POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete all Tutorials
GET/api/tutorials?title=[keyword]find all Tutorials which title contains keyword

We make CRUD operations & finder methods with Spring Data MongoDB’s MongoRepository.


  • Java 8
  • Spring Boot 2.2.4 (with Spring Web MVC, Spring Data MongoDB)
  • MongoDB
  • Maven 3.6.1

Project Structure


  • Tutorial data model class corresponds to entity and table tutorials.
  • TutorialRepository is an interface that extends MongoRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController.
  • TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished
  • Configuration for Spring Data MongoDB is in
  • pom.xml contains dependencies for Spring Boot Web MVC and Spring Data MongoDB.


Create & Setup Spring Boot project

Use Spring web tool or your development tool (Spring Tool Suite, Eclipse, Intellij) to create a Spring Boot project.

Then open pom.xml and add these dependencies:



Configure Spring Data MongoDB

Under src/main/resources folder, open and add following lines.

Define Data Model

Our Data model is Tutorial with four fields: id, title, description, published.
In model package, we define Tutorial class.




@Document(collection = "tutorials")
public class Tutorial {
  private String id;

  private String title;
  private String description;
  private boolean published;


@Document annotation helps us override the collection name by “tutorials”.

Create Repository Interface

Let’s create a repository to interact with Tutorials from the database.
In repository package, create TutorialRepository interface that extends MongoRepository.



import java.util.List;



public interface TutorialRepository extends MongoRepository<Tutorial, String> {
  List<Tutorial> findByTitleContaining(String title);
  List<Tutorial> findByPublished(boolean published);

Now we can use MongoRepository’s methods: save(), findOne(), findById(), findAll(), count(), delete(), deleteById()… without implementing these methods.

We also define custom finder methods:
findByTitleContaining(): returns all Tutorials which title contains input title.
findByPublished(): returns all Tutorials with published having value as input published.

The implementation is plugged in by Spring Data MongoDB automatically.

Create Spring Rest APIs Controller

Finally, we create a controller that provides APIs for creating, retrieving, updating, deleting and finding Tutorials.



@CrossOrigin(origins = "http://localhost:8081")
public class TutorialController {

  TutorialRepository tutorialRepository;

  public ResponseEntity<List<Tutorial>> getAllTutorials(@RequestParam(required = false) String title) {

  public ResponseEntity<Tutorial> getTutorialById(@PathVariable("id") String id) {

  public ResponseEntity<Tutorial> createTutorial(@RequestBody Tutorial tutorial) {

  public ResponseEntity<Tutorial> updateTutorial(@PathVariable("id") String id, @RequestBody Tutorial tutorial) {

  public ResponseEntity<HttpStatus> deleteTutorial(@PathVariable("id") String id) {

  public ResponseEntity<HttpStatus> deleteAllTutorials() {

  public ResponseEntity<List<Tutorial>> findByPublished() {


@CrossOrigin is for configuring allowed origins.
@RestController annotation is used to define a controller and to indicate that the return value of the methods should be be bound to the web response body.
@RequestMapping("/api") declares that all Apis’ url in the controller will start with /api.
– We use @Autowired to inject TutorialRepository bean to local variable.

You can continue with step by step to implement this Spring Boot Server in the post:
Spring Boot with MongoDB CRUD example using Spring Data

Run Spring Boot Server

Run Spring Boot application with Maven command: mvn spring-boot:run.

Angular 8 Front-end



– The App component is a container with router-outlet. It has navbar that links to routes paths via routerLink.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialService methods which use Angular HTTPClient to make HTTP requests and receive responses.


  • Angular 8
  • Angular HTTPClient
  • Angular Router

Project Structure


– There are 3 components: tutorials-list, tutorial-details, add-tutorial.
tutorial.service has methods for sending HTTP requests to the Apis.
app-routing.module.ts defines routes for each component.
app component contains router view and navigation bar.
app.module.ts declares Angular components and import necessary modules.


Setup Angular 8 Project

Let’s open cmd and use Angular CLI to create a new Angular Project as following command:

ng new Angular8ClientCrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

We also need to generate some Components and Services:

ng g s services/tutorial

ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list

Now you can see that our project directory structure looks like this.

Set up App Module

Open app.module.ts and import FormsModule, HttpClientModule:

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

  declarations: [ ... ],
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Define Routes for Angular AppRoutingModule

There are 3 main routes:
/tutorials for tutorials-list component
/tutorials/:id for tutorial-details component
/add for add-tutorial component


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TutorialsListComponent } from './components/tutorials-list/tutorials-list.component';
import { TutorialDetailsComponent } from './components/tutorial-details/tutorial-details.component';
import { AddTutorialComponent } from './components/add-tutorial/add-tutorial.component';

const routes: Routes = [
  { path: '', redirectTo: 'tutorials', pathMatch: 'full' },
  { path: 'tutorials', component: TutorialsListComponent },
  { path: 'tutorials/:id', component: TutorialDetailsComponent },
  { path: 'add', component: AddTutorialComponent }

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }

Add Navbar and Router View to Angular CRUD App

Let’s open src/app.component.html, this App component is the root container for our application, it will contain a nav element.

  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <a href="#" class="navbar-brand">bezKoder</a>
    <div class="navbar-nav mr-auto">
      <li class="nav-item">
        <a routerLink="tutorials" class="nav-link">Tutorials</a>
      <li class="nav-item">
        <a routerLink="add" class="nav-link">Add</a>

  <div class="container mt-3">

Create Data Service

This service will use Angular HTTPClient to send HTTP requests.
You can see that its functions includes CRUD operations and finder method.


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const baseUrl = 'http://localhost:8080/api/tutorials';

  providedIn: 'root'
export class TutorialService {

  constructor(private http: HttpClient) { }

  getAll() {
    return this.http.get(baseUrl);

  get(id) {
    return this.http.get(`${baseUrl}/${id}`);

  create(data) {
    return, data);

  update(id, data) {
    return this.http.put(`${baseUrl}/${id}`, data);

  delete(id) {
    return this.http.delete(`${baseUrl}/${id}`);

  deleteAll() {
    return this.http.delete(baseUrl);

  findByTitle(title) {
    return this.http.get(`${baseUrl}?title=${title}`);

Create Angular Components

As you’ve known before, there are 3 components corresponding to 3 routes defined in AppRoutingModule.

  • Add new Item Component
  • List of items Component
  • Item details Component

You can continue with step by step to implement this Angular App in the post:
Angular 8 CRUD Application example with Web API

Newer versions:
Angular 10 CRUD Application example with Web API
Angular 11 CRUD Application example with Web API

Run the Angular App

You can run this App with command: ng serve --port 8081.
If the process is successful, open Browser with Url: http://localhost:8081/ and check it.

Further Reading

Angular 8 + Spring Boot: JWT Authentication with Spring Security example
Angular 8 + Spring Boot + PostgreSQL example: CRUD App
Angular 8 + Spring Boot: File upload example


Now we have an overview of Angular 8 + Spring Boot + MongoDB example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data MongoDB, as well as Angular 8 project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system:
– Front-end:

You will want to know how to make pagination:
Angular 8 + Spring Boot: Pagination example

Or run both projects in one place:
How to Integrate Angular with Spring Boot Rest API

Angular 8 Firebase CRUD Realtime DB | AngularFireDatabase

Happy learning, see you again!

One thought to “Angular 8 + Spring Boot + MongoDB example: full-stack CRUD Application”

Leave a Reply

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