Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.

[RaviPrakash1264]

<div class="modal-body"> <p> Are you sure you want to delete employee {{ deleteEmployee?.name }}? </p> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" > No </button> <button (click)="onDeleteEmployee(deleteEmployee?.id)" class="btn btn-danger" data-dismiss="modal" > Yes </button> </div> </div>

//getting error in line

(click)="onDeleteEmployee(deleteEmployee?.id)"

[RaviPrakash1264]

This issue is coming in app.component.html file.From here I took the code - https://github.com/getarrays/employeemanagerapp/blob/065fa88c1dfcf05a2458ee38e277b67d621b65a9/src/app/app.component.html

this was edited by @Lethaha

[Soukaina235]

I fixed it by doing the following:

1. Indicating that the employee parameter can either be an object of type Employee or it can be null.
2. And then checking in the function if employee is null before assigning it to editEmployee.

Here is the code:

  public onOpenModal(employee: Employee | null, mode: string): void {
    const container = document.getElementById('main-container');

    const button = document.createElement('button');
    button.type = 'button';
    button.style.display = 'none';
    button.setAttribute('data-toggle', 'modal');

    if (mode === 'add') {
      button.setAttribute('data-target', '#addEmployeeModal');
    }
    if (mode === 'edit') {
      if (employee != null) {
        this.editEmployee = employee;
      }
      button.setAttribute('data-target', '#updateEmployeeModal');
    }
    if (mode === 'delete') {
      button.setAttribute('data-target', '#deleteEmployeeModal');
    }

    container?.appendChild(button);
    button.click();
  }