24 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			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>
 |