Modal showing blank

Question

Hi

  On click of Edit in a row values are not shown in Modal . Values are returned by API.

We are using Angular17.

<div class="modal" id="myModal" #myModal>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">New Employee</h1>
          <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
        </div>
        <form [formGroup]="form" (ngSubmit)="submit()" > 
          <div class="modal-body">
            <div class="form-group" class="row g-3">
                <div class="col-md-6">
                    <label for="inputEmail4" class="form-label">Name</label>
                    <input type="text" formControlName="empName" id="empName" type="text" class="form-control">
                </div>
                <div class="col-md-6">
                    <label for="inputPassword4" class="form-label">Email</label>
                    <input type="text" formControlName="email" id="email" type="text" class="form-control">
                </div>
                
                <label for="empContactNo" class="form-label">Contact No</label>
                <input type="text" formControlName="empContactNo" id="empContactNo" class="form-control">

                <label for="addressLine1" class="form-label">Address1</label>
                <input type="text" formControlName="addressLine1" id="addressLine1" class="form-control">

                <label for="addressLine2" class="form-label">Address2</label>
                <input type="text" formControlName="addressLine2" id="addressLine2" class="form-control">

                <div class="col-md-4">
                    <label for="pincode" class="form-label">Pin Code</label>
                    <input type="text" formControlName="pinCode" id="pinCode" type="text" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="city" class="form-label">City</label>
                    <input type="text" formControlName="city" id="city" type="text" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="state" class="form-label">State</label>
                    <input type="text" formControlName="state" id="state" type="text" class="form-control">
                </div>  
                
                <label for="bankName" class="form-label">Bank Name</label>
                <input type="text" formControlName="bankName" id="bankName" class="form-control">

                <div class="col-md-4">
                    <label for="ifsc" class="form-label">IFSC</label>
                    <input type="text" formControlName="ifsc" id="ifsc" type="text" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="accountNo" class="form-label">Account No</label>
                    <input type="text" formControlName="accountNo" id="accountNo" type="text" class="form-control">
                </div>
                <div class="col-md-4">
                    <label for="bankBranch" class="form-label">Bank Branch</label>
                    <input type="text" formControlName="bankBranch" id="bankBranch" class="form-control">       
                </div>
                <label for="salary" class="form-label">Salary</label>
                <input type="text" formControlName="salary" id="salary" class="form-control">       
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-success btn-sm" type="submit">Save</button>
          </div>
        </form> 

      </div>
    </div>
  </div>

onEdit(Id:number)
  {
      this.empSrv.getEmpById(Id).subscribe((res:any)=>{
      this.objEmployee = res.data;
      debugger;
      this.openModal();
    })
  }

Thanks