folder-tree.component.html

<mat-list *ngIf="dataSource.data.length === 0" role="list">
    <mat-list-item role="listitem">
        <mat-form-field>
            <input matInput #itemValue placeholder="Nouveau dossier...">
        </mat-form-field>
        <button mat-icon-button (click)="createRoot(itemValue.value)" [disabled]="itemValue.value === ''">
            <mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon>
        </button>
    </mat-list-item>
</mat-list>

<mat-nav-list>
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node [@hideShow] *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="20px">
            <!-- use a disabled button to provide padding for tree leaf -->
            <button class="expandButton" mat-icon-button disabled></button>
            <a mat-list-item disableRipple [class.selectedFolder]="node.selected" (mouseenter)="showAction(node)"
                (mouseleave)="hideAction(node)" (click)="selectFolder(node)">
                <span style="flex:1;overflow: hidden;text-overflow: ellipsis;">
                    <span style="white-space: pre;" [title]="node.label">
                        {{node.label}}
                    </span>
                </span>
                <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();showAction(node);"
                    [disabled]="!node.showAction">
                    <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon>
                    <span *ngIf="!node.showAction">
                        4
                    </span>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="addNewItemRoot(node)">Nouveau dossier racine</button>
                    <button mat-menu-item (click)="addNewItem(node)">Nouveau sous-dossier</button>
                    <button mat-menu-item (click)="deleteNode(node)">Supprimer</button>
                </mat-menu>
            </a>
        </mat-tree-node>
        <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding
            matTreeNodePaddingIndent="45px">
            <mat-form-field>
                <input matInput #itemValue placeholder="Nouveau dossier...">
            </mat-form-field>
            <button mat-icon-button (click)="saveNode(node, itemValue.value)" [disabled]="itemValue.value === ''">
                <mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon>
            </button>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-tree-node [@hideShow] *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding
            matTreeNodePaddingIndent="20px">
            <button class="expandButton" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                <mat-icon
                    class="mat-icon-rtl-mirror fa {{treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'}}">
                </mat-icon>
            </button>
            <a mat-list-item disableRipple [class.selectedFolder]="node.selected" (mouseleave)="hideAction(node)"
                (mouseenter)="showAction(node)" (click)="selectFolder(node)">
                <span style="flex:1;overflow: hidden;text-overflow: ellipsis;">
                    <span style="white-space: pre;" [title]="node.label">
                        {{node.label}}
                    </span>
                </span>
                <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();"
                    [disabled]="!node.showAction">
                    <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon>
                    <span *ngIf="!node.showAction">
                        4
                    </span>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="addNewItemRoot(node)">Nouveau dossier racine</button>
                    <button mat-menu-item (click)="addNewItem(node)">Nouveau sous-dossier</button>
                    <button mat-menu-item (click)="deleteNode(node)">Supprimer</button>
                </mat-menu>
            </a>
        </mat-tree-node>
    </mat-tree>
</mat-nav-list>