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

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 >
      <div >
        <img
          src="assets/showcase/images/demo/product/{{product.image}}"
          [alt]="product.name"
          
        />
      </div>
      <div >
        <h5 >{{product.name}}</h5>
        <i ></i>
        <span >{{product.category}}</span>
      </div>
      <div >
        <h6 >${{product.price}}</h6>
        <span
          [class]="'product-badge status-'   product.inventoryStatus.toLowerCase()"
          >{{product.inventoryStatus}}</span
        >
      </div>
    </div>
  </ng-template>
</p-pickList>

CodePudding user response：

Turning the <h5 >{{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