<mat-tree [dataSource]="nestedDataSource" [treeControl]="treeControl" class='tag-tree' fxFlexFill>
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle [matTooltip]="node.label">
        <li class="mat-tree-node">
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            {{ node.getLabel() }}
            <button mat-icon-button *ngIf='node.hasInfo' (click)='showInfo(node)' matTooltip="Show info">
                <mat-icon>info</mat-icon>
            </button>
            <button mat-icon-button *ngIf='node.hasDelete' (click)='delete(node)' matTooltip="Delete tag">
                <mat-icon>delete</mat-icon>
            </button>
        </li>
    </mat-tree-node>
    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
        <li>
            <div class="mat-tree-node" [matTooltip]="node.label">
                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.getLabel()">
                    <mat-icon class="mat-icon-rtl-mirror">
                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                </button>
                {{ node.getLabel() }}
            </div>
            <ul [class.tag-tree-invisible]="!treeControl.isExpanded(node)">
                <ng-container matTreeNodeOutlet></ng-container>
            </ul>
        </li>
    </mat-nested-tree-node>
</mat-tree>