<div class="tree"><cdk-tree cdkDropList [id]="uid + '_parent_drop_list'" [dataSource]="dataSub | async" [treeControl]="treeControl" [cdkDropListData]="node" [cdkDropListDisabled]="false" (cdkDropListDropped)="onDragDrop($event)" class="tree-node-drop-list"><cdk-nested-tree-node cdkDrag [id]="uid + '_node_' + node.model.data.id" *cdkTreeNodeDef="let node" [cdkDragData]="node" (mouseenter)="onDragHover(node)" (mouseleave)="onDragHoverEnd()" (cdkDragStarted)="onDragStart()" (cdkDragReleased)="onDragEnd()" class="tree-node"><a mat-icon-button disabled="disabled"></a><span cdkDragHandle [textContent]="node.model.data.name" (click)="openDialog(node.model)"></span><div *cdkDragPreview [textContent]="node.model.data.name" class="tree-node-drag-preview"></div><div cdkDropList [id]="uid + '_node_' + node.model.data.id + '_drop_list'" [cdkDropListData]="node" [cdkDropListDisabled]="false" (cdkDropListDropped)="onDragDrop($event)" class="tree-node-drop-list"></div></cdk-nested-tree-node><cdk-nested-tree-node cdkDrag [id]="uid + '_node_' + node.model.data.id" *cdkTreeNodeDef="let node; when: hasChild" [cdkDragData]="node" (mouseenter)="onDragHover(node)" (mouseleave)="onDragHoverEnd()" (cdkDragStarted)="onDragStart()" (cdkDragReleased)="onDragEnd()" class="tree-node"><a cdkTreeNodeToggle mat-icon-button [attr.aria-label]="'toggle ' + node.model.data.name"><mat-icon class="mat-icon-rtl-mirror">{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon></a><span cdkDragHandle [textContent]="node.model.data.name" (click)="openDialog(node.model)"></span><div *cdkDragPreview [textContent]="node.model.data.name" class="tree-node-drag-preview"></div><div [class.tree-invisible]="!treeControl.isExpanded(node)"><ng-container cdkTreeNodeOutlet></ng-container></div></cdk-nested-tree-node></cdk-tree></div>