dual-list.component.html 2.26 KB
<div class="container-dualListBox">
  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight"
    cdkDropList
    #userList="cdkDropList"
    [cdkDropListData]="availableItems.totalItems"
    [cdkDropListConnectedTo]="[memberList]"
    (cdkDropListDropped)="drop($event)">
   <div class="list-title" *ngIf="title1">{{title1}}</div>
   <div *ngFor="let item of availableItems.totalItems" cdkDrag [ngClass]="{ choosed: availableItems.isSelected(item,1) }" (click)="availableItems.select(item)">
      <mat-list *ngIf="templateItem;else noTemplateItem" >
        <ng-container [ngTemplateOutlet]="templateItem" [ngTemplateOutletContext]="{ data: item }"> </ng-container>
      </mat-list>
      <ng-template #noTemplateItem>
        {{item.name}}
      </ng-template>
    </div>
  </div>
  <div class="container-buttons">
    <div class="" (click)="select()">
      <div *ngIf="templateArrowRight;else arrowRigth">
        <ng-container [ngTemplateOutlet]="templateArrowRight">
        </ng-container>
      </div>
      <ng-template #arrowRigth>
        <button mat-icon-button> <mat-icon>arrow_forward</mat-icon> </button>
      </ng-template>
    </div>
    <div class="" (click)="return()">
      <div *ngIf="templateArrowLeft;else arrowLeft">
        <ng-container [ngTemplateOutlet]="templateArrowLeft">
        </ng-container>
      </div>
      <ng-template #arrowLeft>
        <button mat-icon-button> <mat-icon>arrow_back</mat-icon> </button>
      </ng-template>
    </div>
  </div>
  <div class="container-items" [style.minHeight]="minHeight" [style.maxHeight]="maxHeight"
    cdkDropList
    #memberList="cdkDropList"
    [cdkDropListData]="selectedItems.totalItems"
    [cdkDropListConnectedTo]="[userList]"
    (cdkDropListDropped)="drop($event)">
    <div class="list-title" *ngIf="title2">{{title2}}</div>
    <div *ngFor="let item of selectedItems.totalItems" cdkDrag [ngClass]="{ choosed: selectedItems.isSelected(item,2) }"  (click)="selectedItems.select(item)">
      <mat-list *ngIf="templateItem;else noTemplateItem">
        <ng-container [ngTemplateOutlet]="templateItem" [ngTemplateOutletContext]="{ data: item }"> </ng-container>
      </mat-list>
      <ng-template #noTemplateItem>
        {{item.name}}
      </ng-template>
    </div>
  </div>
</div>