when i click the checkbox i want to edit and make the td an inputbox
 <table
        class="table table-borderless text-custom-fs-16px border-b border-custom-gray2"
      >
        <thead class="bg-custom-orange">
          <tr>
            <th class="text-white w-custom-5% rounded-none text-center">
              <input
                type="checkbox"
                [(ngModel)]="selectAll"
                (change)="toggleSelectAll()"
              />
            </th>
            <th class="text-white w-custom-5% rounded-none text-center">No.</th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Code
            </th>
            <th class="text-white w-custom-35% rounded-none text-center">
              Name
            </th>
            <th class="text-white w-custom-35% rounded-none text-center">
              Description
            </th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <ng-container
            *ngFor="
              let country of filteredCountries;
              let counter = index;
              let isOdd = odd
            "
          >
            <tr
              [class.even:bg-custom-white-bg]="isOdd"
              [class.odd:bg-white]="!isOdd"
              class="border-t border-b"
            >
              <td class="w-custom-5% rounded-none text-center">
                <input
                  type="checkbox"
                  [(ngModel)]="country.selected"
                  (change)="anySelected()"
                />
              </td>
              <td class="w-custom-5% rounded-none text-center">
                {{ counter + 1 }}
              </td>
              <td class="w-custom-10% rounded-none text-center">
                {{ country.code }}
              </td>
              <td class="w-custom-35% rounded-none text-center">
                {{ country.name }}
              </td>
              <td class="w-custom-35% rounded-none text-center">
                {{ country.description }}
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <button
                  (click)="openModal(2, country)"
                  type="button"
                  class="bg-custom-gray text-custom-blue border-none w-custom-w-60px h-custom-h-30px mr-1 hover:bg-custom-gray focus:bg-custom-gray rounded"
                >
                  <i class="material-icons align-top">edit</i>
                </button>
                <button
                  (click)="openConfirmationDialogBox(3, country)"
                  type="button"
                  class="bg-custom-red-del text-custom-white border-none w-custom-w-60px h-custom-h-30px hover:bg-custom-red-del focus:bg-custom-red-del rounded"
                >
                  <i class="material-icons align-top">delete_forever</i>
                </button>
              </td>
            </tr>
          </ng-container>
          <tr *ngIf="isObjectEmpty(countries)">
            <td colspan="6" class="text-center">{{ EMPTY_LIST }}</td>
          </tr>
        </tbody>
      </table>