<div class="container mx-auto p-2">
  <div class="row p-2">
    <div class="col-lg-12">
      <h1>Mortal Kombat 11</h1>
    </div>
  </div>
  <div class="row">
    <div cdkDropList #minha="cdkDropList" [cdkDropListConnectedTo]="[confirmados]" [cdkDropListData]="myList"
      class="col-lg-6" (cdkDropListDropped)="drop($event)">
      <ul class="list-group">
        <li class="list-group-item list-group-item-danger">
          <h3>Minha Lista</h3>
        </li>
        <li class="list-group-item" *ngFor="let p of myList " cdkDrag>{{p.name}}</li>
      </ul>
    </div>
    <div cdkDropList #confirmados="cdkDropList" [cdkDropListData]="confirmList" [cdkDropListConnectedTo]="[minha]"
      (cdkDropListDropped)="drop($event)" class="col-lg-6">
      <ul class="list-group">
        <li class="list-group-item active">
          <h3>Confirmados</h3>
        </li>
        <li class="list-group-item" *ngFor="let p of confirmList" cdkDrag>
          <img [src]="p.image" class="img-person">
          {{p.name}}</li>
      </ul>
    </div>
  </div>
</div>