Angular Material tree - 造型的可能性

Question

I am choosing angular material tree component over the FancyTree js component because of typescript support.

I find that the material tree component does not have many options for styling except for colors (theming).

How to make the material tree component look like the following fancy tree style ?

FancyTree also has interesting event binding functionality, does the material tree provide this as well?

Answer 1

You can add events and style it the way you like. According to your link for "Fancy tree style" the only thing you need it to style text the way you like (font-family, font-size, font-weight etc) and add one more material icon for controlling open state for folder as in my example code below:

<cdk-nested-tree-node
*cdkTreeNodeDef="let node; when: hasChild"
class="tree-node"
>
<button
  mat-icon-button
  [attr.aria-label]="'toggle ' + node.name"
  cdkTreeNodeToggle
>
  <mat-icon class="mat-icon-rtl-mirror">
    {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
  </mat-icon>
  //here is an additional icon and conditional to follow up with open close state which is actually what you wanted if I am not mistaken 
  <mat-icon class="mat-icon-rtl-mirror">
    {{ treeControl.isExpanded(node) ? "folder" : "folder_open" }}
  </mat-icon>
  //icon ends here 
</button>

{{ node.name }}
<div [class.tree-invisible]="!treeControl.isExpanded(node)">
  <ng-container cdkTreeNodeOutlet></ng-container>
</div>

so you get similar to this look and feel as the link you provided ("Fancy tree style"):

I hope this helps!