59 lines
2.0 KiB
HTML
59 lines
2.0 KiB
HTML
<cdk-virtual-scroll-viewport #cvsvGroup itemSize="80" fxFlexFill>
|
|
<ng-container
|
|
*cdkVirtualFor="let node of dataSource.expandedData$"
|
|
></ng-container>
|
|
<mat-tree
|
|
#groupTree
|
|
[dataSource]="dataSource"
|
|
[treeControl]="treeControl"
|
|
class="group-tree"
|
|
>
|
|
<!-- This is the tree node template for leaf nodes -->
|
|
<mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
|
|
<li>
|
|
<div class="mat-tree-node">
|
|
<ng-container
|
|
[ngTemplateOutlet]="expansionPanelItemTemplateRef"
|
|
[ngTemplateOutletContext]="{ $implicit: node?.userInfo }"
|
|
>
|
|
</ng-container>
|
|
{{ node?.userInfo?.name }}
|
|
</div>
|
|
</li>
|
|
</mat-tree-node>
|
|
<!-- This is the tree node template for expandable nodes -->
|
|
<mat-tree-node
|
|
style="height: 80px;"
|
|
*matTreeNodeDef="let node; when: hasChild"
|
|
class="tree-node-frame"
|
|
>
|
|
<li>
|
|
<div class="mat-tree-node" class="path">
|
|
<span class="horizontal-line"></span>
|
|
<button
|
|
mat-icon-button
|
|
color="accent"
|
|
matTreeNodeToggle
|
|
[attr.aria-label]="'toggle '"
|
|
>
|
|
<mat-icon class="mat-icon-rtl-mirror">
|
|
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
|
|
</mat-icon>
|
|
</button>
|
|
<ng-container [ngSwitch]="node.nodeType">
|
|
<span *ngSwitchCase="NodeType.Profile">Profile</span>
|
|
<span *ngSwitchCase="NodeType.Favorit">Favorit</span>
|
|
<span *ngSwitchCase="NodeType.Buddy">Buddy</span>
|
|
</ng-container>
|
|
</div>
|
|
<ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
|
|
<div *ngIf="treeControl.isExpanded(node)" class="boxnone">
|
|
<div class="vertical-line"></div>
|
|
<ng-container matTreeNodeOutlet></ng-container>
|
|
</div>
|
|
</ul>
|
|
</li>
|
|
</mat-tree-node>
|
|
</mat-tree>
|
|
</cdk-virtual-scroll-viewport>
|