How to make picklist editable in the target component in angular?

I am using p-picklist and I want to edit target list span data used for displaying the value.

I am using the source code: https://primefaces.org/primeng/showcase/#/picklist

How can I make product name editable in the target list.

<p-pickList
  [source]="sourceProducts"
  [target]="targetProducts"
  sourceHeader="Available"
  targetHeader="Selected"
  [dragdrop]="true"
  [responsive]="true"
  [sourceStyle]="{'height':'30rem'}"
  [targetStyle]="{'height':'30rem'}"
  filterBy="name"
  sourceFilterPlaceholder="Search by name"
  targetFilterPlaceholder="Search by name"
>
  <ng-template let-product pTemplate="item">
    <div class="product-item">
      <div class="image-container">
        <img
          src="assets/showcase/images/demo/product/{{product.image}}"
          [alt]="product.name"
          class="product-image"
        />
      </div>
      <div class="product-list-detail">
        <h5 class="p-mb-2">{{product.name}}</h5>
        <i class="pi pi-tag product-category-icon"></i>
        <span class="product-category">{{product.category}}</span>
      </div>
      <div class="product-list-action">
        <h6 class="p-mb-2">${{product.price}}</h6>
        <span
          [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()"
          >{{product.inventoryStatus}}</span
        >
      </div>
    </div>
  </ng-template>
</p-pickList>

Turning the <h5 class="p-mb-2">{{product.name}}</h5> into an input with [(ngModel)]="product.name" seem to work.

In order to check if the templated item is listed under target and not under source, you can check the element's position on the DOM; if it is inside .p-picklist-target, show the input, else show h5.

StackBlitz