Overview

Are you a beginner looking to master full-stack development with Angular and Spring Boot? This step-by-step guide will help you implement CRUD operations (Create, Read, Update, Delete) using Angular as the frontend and Spring Boot as the backend — connected via REST APIs.

We will build a Student Management System that covers all CRUD operations and helps you understand how modern web applications work

📌 What You’ll Learn

• How to create REST APIs using Spring Boot.
• How to consume those APIs in Angular using HTTPClient
• Form Handling using Reactive Forms in Angular
• Connecting Angular with Spring Boot
• Full project structure and flow explained for beginners

What We’ll Build

• Backend A Spring Boot application with REST APIs for CRUD Operations (Student Management System).
• Frontend A Angular application with all the CRUD functionality like Add Student, view Students, Update, and Delete Student.
• Integration Connecting the Angular frontend to the Spring Boot backend.

Tools and Technologies

• Spring Boot : For building REST APIs.
• Angular : For building the user interface..
• MySQL : For storing user data.
• HttpClient : For making HTTP requests from Angular to Spring Boot.

🗂️ Project Overview

👨‍💻 Backend: Spring Boot

• Student Entity: Class with fields – id, name, age, department
• Controller: Handles endpoints like /addStudent, /getStudents, /deleteStudent/{id}
• Service + Repository: For handling business logic and database operations

🌐 Frontend: Angular

• Add Student Component
• Show Students Component
• Consumes Spring Boot REST APIs using HttpClient
• Uses Reactive Forms for form validation

Now let’s create complete full stack project while implementing CRUD operations using Angular, Spring Boot and MySQL step-by-step

Step -1: Recap of the Spring Boot Backend

Before diving into the Angular frontend, let’s quickly recap the Spring Boot backend application where we implemented CRUD REST APIs. If you haven’t set it up yet, follow our Implement CRUD Operations using spring boot to create the following:

• Student Entity : A Student class with fields like id, name, department, and age.
• UserRepository : A Spring Data JPA repository for database operations.
• UserService : A service to handle all student-related business logic..
• UserController : REST endpoints for /addStudent, /getStudents, /deleteStudent/{id} and /updateStudent.

Step 2: Set Up a Angular project

Create a new angular Application:

 
ng new student-crud-angular
cd student-crud-angular
npm install bootstrap
ng generate component add-student
ng generate component show-student

Import necessary modules in app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
})

Step 3: Add Student Form (add-student.component)

HTML Structure (add-student.component.html)

<h1>Add Student</h1>
<form [formGroup]="student" (ngSubmit)="handleSubmit()" >
  <label>Id:</label>
  <input type="number" formControlName="id" /><br /><br />

  <label>Name:</label>
  <input type="text" formControlName="name" /><br /><br />

  <label>Age:</label>
  <input type="number" formControlName="age" /><br /><br />

  <label>Department:</label>
  <input type="text" formControlName="dept" /><br /><br />

  <button type="submit">Add Student</button>
</form>

Typescript (add-student.component.ts)

export class AddStudentComponent {
  constructor(private httpClient: HttpClient) {}

  student = new FormGroup({
    id: new FormControl(),
    name: new FormControl(),
    age: new FormControl(),
    dept: new FormControl(),
  });

  handleSubmit() {
    const url = "http://localhost:8082/addStudent";
    this.httpClient.post(url, this.student.value).subscribe({
      next: (res) => console.log("Student Added:", res),
      error: (err) => console.error("Add Failed:", err),
    });
  }
}

Step 4: Show All Students (show-student.component)

HTML Structure (show-student.component.html)

<h1>All Students</h1>
<table>
  <thead>
    <tr>
      <th>ID</th><th>Name</th><th>Dept</th><th>Age</th><th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let student of students">
      <td>{{student.id}}</td>
      <td>{{student.name}}</td>
      <td>{{student.dept}}</td>
      <td>{{student.age}}</td>
      <td><button (click)="deleteStudent(student.id)">Delete</button></td>
    </tr>
  </tbody>
</table>

Typescript (show-student.component.ts)

export class ShowStudentComponent implements OnInit {
  students: any[] = [];

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.getAllStudentData();
  }

  getAllStudentData() {
    this.httpClient.get("http://localhost:8082/getStudents").subscribe({
      next: (res: any) => this.students = res,
      error: (err) => console.error("Fetch error:", err),
    });
  }

  deleteStudent(id: number) {
    this.httpClient.get(`http://localhost:8082/deleteStudent/${id}`).subscribe({
      next: () => this.getAllStudentData(),
      error: (err) => console.error("Delete error:", err),
    });
  }
}

Step 3: Add Student Form (add-student.component)

HTML Structure (add-student.component.html)

<h1>Add Student</h1>
<form [formGroup]="student" (ngSubmit)="handleSubmit()" >
  <label>Id:</label>
  <input type="number" formControlName="id" /><br /><br />

  <label>Name:</label>
  <input type="text" formControlName="name" /><br /><br />

  <label>Age:</label>
  <input type="number" formControlName="age" /><br /><br />

  <label>Department:</label>
  <input type="text" formControlName="dept" /><br /><br />

  <button type="submit">Add Student</button>
</form>

Typescript (add-student.component.ts)

export class AddStudentComponent {
  constructor(private httpClient: HttpClient) {}

  student = new FormGroup({
    id: new FormControl(),
    name: new FormControl(),
    age: new FormControl(),
    dept: new FormControl(),
  });

  handleSubmit() {
    const url = "http://localhost:8082/addStudent";
    this.httpClient.post(url, this.student.value).subscribe({
      next: (res) => console.log("Student Added:", res),
      error: (err) => console.error("Add Failed:", err),
    });
  }
}

Step 5: Set Up Routing in Angular

app-routing.module.ts:

const routes: Routes = [
  { path: 'add-student', component: AddStudentComponent },
  { path: 'show-student', component: ShowStudentComponent }
];

app.component.html:

<a routerLink="/add-student">Add Student</a> |
<a routerLink="/show-student">Show Students</a>
<router-outlet></router-outlet>

Final Project Structure

Step 5: Connect Angular application with Spring Boot (Call Spring Boot APIs in Angular)

We’ve already done this using HttpClient inside our components. Just ensure:

• Spring Boot app runs on http://localhost:8082
• Angular runs on http://localhost:4200
• CORS is enabled in your Spring Boot controller using:

  @CrossOrigin(origins = "http://localhost:4200")

Step 6: Conclusion

You’ve now built a complete Angular + Spring Boot CRUD application with real-world use case: a Student Management System. This full-stack project helps you understand:

• How to use Angular’s Reactive Forms and HTTPClient
• How to create REST APIs in Spring Boot
• How to connect Angular frontend with Java backend

You can enhance this project by adding:

• Input validation
• Authentication using JWT
• Role-based access
• Pagination and filtering

Whether you’re a student, a beginner, or someone preparing for a full-stack developer job, this project is your go-to practical implementation!

Youtube Video –

Github Repository –

https://github.com/amangupta7024/CRUD-operations-using-Angular-Spring-Boot

Explore our more articles

• Object Oriented Programming
• SQL Queries for Interview
• Data Structures and Algorithms (DSA)
• Database Management System (DBMS)