ConceptCreator/src/app/side-overviews/item-overview/item-overview.component.html
Sebastian Böckelmann db0455cd07
All checks were successful
E2E Testing / test (push) Successful in 1m32s
Prettier Visualization of Itemgroups
2024-05-05 18:22:49 +02:00

24 lines
1.3 KiB
HTML

<p>item-overview works!</p>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="10">
<!-- use a disabled button to provide padding for tree leaf -->
<button class="small-icon-button" mat-icon-button disabled></button>
<mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEMGROUP">folder</mat-icon>
<mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEM">data_object</mat-icon>
{{node.name}}
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="10">
<button class="small-icon-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="small-icon-button" *ngIf="node.type == ModelComponentType.ITEMGROUP">folder</mat-icon>
<mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEM">data_object</mat-icon>
{{node.name}}
</mat-tree-node>
</mat-tree>