CODEWITHSUNDEEP
angulartree
FX_Sektor
FX_Sektor

Reputation: 1460

How to set icon only for second level | Angular tree

I have angular tree form angular materila tree

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
        [attr.aria-label]="'toggle ' + node.name">
  <mat-icon class="mat-icon-rtl-mirror div-tree-close">
  </mat-icon>
</button>
{{node.name}}
</mat-tree-node>
 <mat-tree-node *matTreeNodeDef="let node;when: hasChild" 
    matTreeNodePadding>
   <button mat-icon-button matTreeNodeToggle
        [attr.aria-label]="'toggle ' + node.name">
  <mat-icon class="mat-icon-rtl-mirror">
    <div >{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} 
 </div>
  </mat-icon>
</button>
{{node.name}}


<style>
  .div-tree-close{
  margin: 5px;
  height: 5px;
  width: 5px;
  background-color: #003d99
}
</style>

I need to set icon only for second level of tree

http://prntscr.com/p3ow9e

Now I can only set icon for all tree. But I need this arrow on first lever//and other level from second need to change. Thanks

Upvotes: 0

Views: 1174

Answers (1)

adarsh
adarsh

Reputation: 213

I had the same requirement where in, the second level tree node needed a different icon.

Add a new <mat-tree-node> as below, with a custom isLevelTwo WHEN condition:

<mat-tree-node *matTreeNodeDef="let node;when: isLevelTwo" 
    matTreeNodePadding>
   <button mat-icon-button matTreeNodeToggle
        [attr.aria-label]="'toggle ' + node.name">
  <mat-icon class="mat-icon-rtl-mirror">
    <div >{{treeControl.isExpanded(node) ? 'remove' : 'add'}} 
 </div>
  </mat-icon>
</button>
{{node.name}}
</mat-tree-node>

In your component.ts you can add a new method like this:

isLevelTwo = (_: number, _nodeData: FlatItemNode) => _nodeData.level === 2;

Now you can remove the buttons/mat-icons within the other <mat-tree-node> nodes

Upvotes: 1

Related Questions