ngx-drag-drop for Primeng

[Anshul-Pandey1]

I am trying to implement [ngx-drag-drop of typed component] the issue is I am using primeng and lists are made from angular material i don`t want to use them is there any possible way to make it work using list module of primeng only

`

Fruits

  <mat-list
    (dndDrop)="onDrop($event, fruits)"
    class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
    dndDropzone
    dndEffectAllowed="move">
    <mat-list-item
      class="dndPlaceholder border rounded-1 bg-danger bg-gradient"
      dndPlaceholderRef>
    </mat-list-item>
    <mat-list-item
      *ngFor="let fruit of fruits; let i = index; trackBy: trackByFruit"
      [dndDraggable]="fruit"
      [dndType]="fruit.type"
      (dndMoved)="onDragged(i, fruit, fruits)"
      class="border rounded-1 bg-white"
      dndEffectAllowed="move">
      <span matListItemTitle>{{ fruit.type }} {{ fruit.id }}</span>
    </mat-list-item>
  </mat-list>
</div>

<div class="col">
  <pre>Apples</pre>
  <mat-list
    [dndDropzone]="['apple']"
    (dndDrop)="onDrop($event, apples)"
    class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
    dndEffectAllowed="move">
    <mat-list-item
      class="dndPlaceholder border rounded-1 bg-success bg-gradient"
      dndPlaceholderRef>
    </mat-list-item>
    <mat-list-item
      *ngFor="let apple of apples; let i = index; trackBy: trackByFruit"
      [dndDraggable]="apple"
      [dndType]="apple.type"
      (dndMoved)="onDragged(i, apple, apples)"
      class="border rounded-1 bg-white"
      dndEffectAllowed="move">
      <span matListItemTitle>{{ apple.type }} {{ apple.id }}</span>
    </mat-list-item>
  </mat-list>
</div>

<div class="col">
  <pre>Bananas</pre>
  <mat-list
    [dndDropzone]="['banana']"
    (dndDrop)="onDrop($event, bananas)"
    class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
    dndEffectAllowed="move">
    <mat-list-item
      class="dndPlaceholder border rounded-1 bg-warning bg-gradient"
      dndPlaceholderRef>
    </mat-list-item>
    <mat-list-item
      *ngFor="let banana of bananas; let i = index; trackBy: trackByFruit"
      [dndDraggable]="banana"
      [dndType]="banana.type"
      (dndMoved)="onDragged(i, banana, bananas)"
      class="border rounded-1 bg-white"
      dndEffectAllowed="move">
      <span matListItemTitle>{{ banana.type }} {{ banana.id }}</span>
    </mat-list-item>
  </mat-list>
</div>

`

[reppners]

Hi, quickly looked through and it seems you are able to define your own template for items. When you define your own template it should enable you to add the necessary directives to the list items.

https://primeng.org/listbox#template

[Anshul-Pandey1]

Thanks for response, can you please give me example how can I implment this
<mat-list-item *ngFor="let fruit of fruits; let i = index; trackBy: trackByFruit" [dndDraggable]="fruit" [dndType]="fruit.type" (dndMoved)="onDragged(i, fruit, fruits)" class="border rounded-1 bg-white" dndEffectAllowed="move"> <span matListItemTitle>{{ fruit.type }} {{ fruit.id }}</span> </mat-list-item>

inside primeng list template
<p-listbox [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [listStyle]="{ 'max-height': '250px' }" [style]="{ width: '15rem' }">

<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px"/>

{{ country.name }}