Created application in spring boot as backend and angular as frontend , data is properly getting from API checked in Postman API plateform(perform all CRUD properly on POSTMAN Plateform) ,In Angular data fetched except id, employee is created properly through angular,but can’t perform operation of Update and delete , as it gives console error “Id is UNDEFINED”
enter image description here
enter image description here

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Employee } from '../model/employee';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private baseUrl = "http://localhost:8080/api/v1/employees";
  employees: Employee[] | undefined;
  constructor(private http: HttpClient) {}

  addEmployee(emp: Employee): Observable<Employee> {
    return this.http.post<Employee>(this.baseUrl, emp)
      .pipe(
        catchError(this.handleError)
      );
  }

  getAllEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.baseUrl)
      .pipe(
        catchError(this.handleError)
      );
      console.log(this.employees);
  }

  updateEmployee(emp: Employee): Observable<Employee> {
    const url = `${this.baseUrl}/${emp.id}`;
    return this.http.put<Employee>(url, emp)
      .pipe(
        catchError(this.handleError)
      );
  }

  deleteEmployee(emp: Employee): Observable<Employee> {
    const url = `${this.baseUrl}/${emp.id}`;
    return this.http.delete<Employee>(url)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: any) {
    console.error('API Error: ', error);
    return throwError(error);
  }
}

import { Component, OnInit } from '@angular/core';
import { Employee } from '../../model/employee';
import { FormBuilder, FormGroup } from '@angular/forms';
import { EmployeeService } from '../../service/employee.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  empDetail !: FormGroup;
  empObj : Employee = new Employee();
  empList : Employee[] = [];

  constructor(private formBuilder : FormBuilder, private empService : EmployeeService) { }

  ngOnInit(): void {

    this.getAllEmployee();

    this.empDetail = this.formBuilder.group({
      id : [''],
      firstName : [''],
      lastName : [''],
      emailId : ['']
    });    
    this.getAllEmployee();
  }

  addEmployee() {
    console.log(this.empDetail);
    this.empObj.id = this.empDetail.value.id;
    this.empObj.firstName = this.empDetail.value.firstName;
    this.empObj.lastName = this.empDetail.value.lastName;
    this.empObj.emailId = this.empDetail.value.emailId;

    this.empService.addEmployee(this.empObj).subscribe({
     next: (res)=>{
        console.log(res);
        this.getAllEmployee();
    },error: err=>{
        console.log(err);
    }});

  }

  getAllEmployee() {
    this.empService.getAllEmployees().subscribe({
      next:(res)=>{
        this.empList = res;
    },error:err=>{
      console.log("error while fetching data.")
    }});
  }

  editEmployee(employee: Employee) {
    if (!employee|| !employee.id) {
      console.error('Employee data or ID is undefined');
      return;
    }
  
    this.empDetail.setValue({
      id: employee.id || '',
      firstName: employee.firstName || '',
      lastName: employee.lastName || '',
      emailId: employee.emailId || ''
    });
  }
  updateEmployee() {
    if (!this.empObj || !this.empObj.id) {
      console.error('Employee data or ID is undefined');
      return;
    }
    this.empObj.id = this.empDetail.value.id;
    this.empObj.firstName = this.empDetail.value.firstName;
    this.empObj.lastName = this.empDetail.value.lastName;
    this.empObj.emailId = this.empDetail.value.emailId;

    this.empService.updateEmployee(this.empObj).subscribe({
      next:(res)=>{
      console.log(res);
      this.getAllEmployee();
    },error: err=>{
      console.log(err);
    }})

  }

  deleteEmployee(emp : Employee) {
    if (!emp || !emp.id) {
      console.error('Employee data or ID is undefined');
      return;
    }
  
    this.empService.deleteEmployee(emp).subscribe({
      next: (res) => {
        console.log(res);
        alert('Employee deleted successfully');
        this.getAllEmployee();
      },
      error: (err) => {
        console.log(err);
      }
    });
  }

}

enter image description here

enter image description here

I am trying to add more validation to find exact problem , but conclusion I am getting is there is something blocking ID field in angular side so can’t perform operation, I just want to help to resolve this problem