How to render specific tree nodes in Angular Material flat tree based on a node property?

Question

I wanna display specific tree nodes <mat-tree-node> based on a node's nodeAuthorized: boolean property. How can I achieve this since angular does not allow more than 2 structural directives on a single element.

I've tried using the nodeAuthorized property on the only child <div> of <mat-tree-node>, but this renders an empty space between 2 or more tree nodes. Any help would be appreciated?

This is what I've tried but, this leaves an obvious empty space between nodes which I don't want.

<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
 <div *ngIf="node.treeNode.nodeAuthorized">   
  <button mat-icon-button matTreeNodeToggle>
   <mat-icon class="mat-icon-rtl-mirror">
    {{
       treeControl.isExpanded(node) ? "expand_more" : "chevron_right"
     }}
    </mat-icon>
   </button>

   {{node.treeNode.nodeName}}
 </div>
</mat-tree-node>

Amritraj · Accepted Answer · 2020-09-01 19:27:02Z

1

*matTreeNodeDef can be used with <ng-container> which can then be used with another HTML element say <div> and structural directive *ngIf to render specific nodes.

<ng-container *matTreeNodeDef="let node">
    <ng-container *ngIf="node.authorized"> /** node rendering condition goes here */
      <mat-tree-node matTreeNodePadding>
        <button mat-icon-button matTreeNodeToggle>
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}}
      </mat-tree-node>
    </ng-container>
  </ng-container>

edited Sep 1, 2020 at 19:27

answered May 1, 2019 at 17:23

Amritraj

252 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chandermani Over a year ago

Can you please share an example of this?

Amritraj Over a year ago

@Chandermani I have updated my answer with am example.

Collectives™ on Stack Overflow

How to render specific tree nodes in Angular Material flat tree based on a node property?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related