41 lines
1.6 KiB
HTML
41 lines
1.6 KiB
HTML
|
|
|
|
|
|
|
|
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
|
|
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
|
|
<button mat-icon-button disabled></button>
|
|
<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
|
|
{{ node.type === 'menuitem' ? 'description' : 'folder' }}
|
|
</mat-icon>
|
|
<div *ngIf="!node.badge">
|
|
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
|
<span *ngIf="!node.route">{{node.name}}</span>
|
|
</div>
|
|
<div matBadge="{{node.badge}}" matBadgeOverlap="false" *ngIf="node.badge">
|
|
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
|
<span *ngIf="!node.route">{{node.name}}</span>
|
|
</div>
|
|
</mat-tree-node>
|
|
|
|
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
|
|
<button mat-icon-button matTreeNodeToggle
|
|
[attr.aria-label]="'Toggle ' + node.name">
|
|
<mat-icon class="mat-icon-rtl-mirror">
|
|
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
|
|
</mat-icon>
|
|
</button>
|
|
<mat-icon class="type-icon" [attr.aria-label]="node.type + 'icon'">
|
|
{{ node.type ==='menuitem' ? 'description' : 'folder' }}
|
|
</mat-icon>
|
|
<div *ngIf="!node.badge">
|
|
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
|
<span *ngIf="!node.route">{{node.name}}</span>
|
|
</div>
|
|
<div matBadge="{{node.badge}}" matBadgeOverlap="false" *ngIf="node.badge">
|
|
<a [routerLink]="[node.route]" *ngIf="node.route">{{node.name}}</a>
|
|
<span *ngIf="!node.route">{{node.name}}</span>
|
|
</div>
|
|
</mat-tree-node>
|
|
</mat-tree>
|