I am trying to update the customer data, only when I change the data and click on the update button I notice that the following error appears on the console:

> 
> HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8080/api//update-customer/undefined", ok: false, …}
> 
> 
> 

the customer id is not recognized. Where did I go wrong?

customer.service.ts

```typescript
import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import { Observable } from 'rxjs';  

@Injectable({  
  providedIn: 'root'  
})  

export class CustomerService {  

  private baseUrl = 'http://localhost:8080/api/';  

  constructor(private http:HttpClient) { }  

  getCustomerList(): Observable<any> {  
    return this.http.get(`${this.baseUrl}`+'customers-list');  
  }  

  createCustomer(customer: object): Observable<object> {  
    return this.http.post(`${this.baseUrl}`+'save-customer', customer);  
  }  

  deleteCustomer(id: number): Observable<any> {  
    return this.http.delete(`${this.baseUrl}/delete-customer/${id}`, { responseType: 'text' });  
  }  

  getCustomer(id: number): Observable<Object> {  
    return this.http.get(`${this.baseUrl}/customer/${id}`);  
  }  

  updateCustomer(id: number, value: any): Observable<Object> {  
    return this.http.post(`${this.baseUrl}/update-customer/${id}`, value);  

```

customer-list.component.html

```html
div class="panel panel-default">
  <div class="panel-heading">
    <h1 style="text-align: center">Customers</h1><br>
    <div class="row" [hidden]="!deleteMessage">

      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <div class="alert alert-info alert-dismissible">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>Customer Data Deleted</strong>
        </div>
      </div>
      <div class="col-sm-4"></div>
    </div>
  </div>

  <div class="panel-body">
    <table class="table table-hover table-sm">
      <thead class="thead-light">
        <tr>
          <th>Customer Name</th>
          <th>Customer Email</th>
          <th>Action</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let customer of customers">
          <td>{{customer.customer_name}}</td>
          <td>{{customer.customer_email}}</td>
          <td><button (click)="deleteCustomer(customer.customer_id)" class='btn btn-primary'><i
                class="fa fa-futboll-0">Delete</i></button>
            <button type="button" class="btn btn-primary" (click)="openModal(editProfileModal, customer)" >Update</button>
          </td>
        </tr>
      </tbody><br>
    </table>
  </div>
</div>

<ng-template #editProfileModal let-modal>
  <div class="modal-header">
   <h5 class="modal-title" id="editProfileLabel">Edit Profile</h5>
   <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
    <span aria-hidden="true">&times;</span>
   </button>
  </div>

  <div class="modal-body">
   <form [formGroup]="editProfileForm" (ngSubmit)="onSubmit()">
    <div class="form-group row">
     <label for="name" class="col-sm-4 col-form-label">Customer Name</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" formControlName="customer_name" id="customer_name">
     </div>
    </div>
    <div class="form-group row">
     <label for="email" class="col-sm-4 col-form-label">Customer Email</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" formControlName="customer_email" id="customer_email">
     </div>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>  
      <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button> 
    </div>
   </form>
  </div>
 </ng-template>

```

customer-list.component.ts

```typescript
import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../customer.service';
import { Customer } from '../customer';
import { Observable, Subject } from "rxjs";
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
  editProfileForm!: FormGroup;
  customer_id: number | undefined;

  constructor(private customerservice: CustomerService, private fb: FormBuilder, private modalService: NgbModal) {} 

  customersArray: any[] = [];
  dtTrigger: Subject<any> = new Subject();

  customers: Customer[] = [];
  customer: Customer = new Customer();
  deleteMessage = false;
  customerlist: any;
  isupdated = false;

  ngOnInit() {
    };
    this.customerservice.getCustomerList().subscribe(data => {
      console.log(data)
      this.customers = data;
      this.dtTrigger.next();
    })
    this.editProfileForm = this.fb.group({
      customer_id: [''],
      customer_name: [''],
      customer_email: [''],
      customer_branch: ['']
     });
  }

  openModal(targetModal: any, customer: any) {
    this.modalService.open(targetModal, {
     centered: true,
     backdrop: 'static'
    });

    this.editProfileForm!.patchValue({
     customer_name: customer.customer_name,
     customer_email: customer.customer_email,
     customer_branch: customer.customer_branch
    });
   }

   onSubmit() {
    this.updateCustomer();    
  }

updateCustomer() {
    this.customerservice.updateCustomer(this.customer.customer_id!, this.customer)
      .subscribe(data => {
        console.log(data);
        this.customer = new Customer();
        this.customerservice.getCustomerList();
      }, error => console.log(error));
  }

  deleteCustomer(id: any) {
    this.customerservice.deleteCustomer(id)
      .subscribe(
        data => {
          console.log(data);
          this.deleteMessage = true;
          this.customerservice.getCustomerList().subscribe(data => {
            this.customers = data
          })
        },
        error => console.log(error));
  }

}

```