1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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>