
<div cdkDropListGroup>
  <h2>Escolhidos</h2>
  <div
    cdkDropList
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="chosen"
    class="example-list2"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of chosen" cdkDrag>

      <div *ngIf="item?.description; else elseBlock">{{item.name}}</div>

      <ng-template #elseBlock>
        <img [src]="item.url" alt="Fotografia"
             style="height: 100px; width: auto">
      </ng-template>
    </div>
  </div>
</div>
<br>
<div>
  <h2>Disponiveis</h2>
  <div
    cdkDropList
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="received"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of received" cdkDrag>

      <div *ngIf="item?.description; else elseBlock">
        {{item.name}}
        <hr/>
        {{item.description}}
      </div>

      <ng-template #elseBlock>
        <img [src]="item.url" alt="Fotografia"
             style="height: 100px; width: auto">
      </ng-template>
    </div>
  </div>
</div>


<!--
<div cdkDropListGroup>
  <div class="example-container">
    <h2>Available items</h2>

    <div
      cdkDropList
      [cdkDropListData]="items"
      class="example-list"
      cdkDropListSortingDisabled
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of items" cdkDrag>{{item}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>Shopping basket</h2>

    <div
      cdkDropList
      [cdkDropListData]="basket"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of basket" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>
-->
