Angular mat tree on matTreeNodeDef iteration not able to get index as of ngfor

Question

I have an angular material tree. On which i have a code like below

<mat-tree-node *matTreeNodeDef="let node; let idx=index">
  {{node.filename}}::{{idx}}
</mat-tree-node>

Here idx not populating

Answer 1

I'm afraid *matTreeNodeDef is not same as *ngFor directive.

*matTreeNodeDef directive accepts 2 Inputs.

First being TreeNode<T> which can be defined as

<mat-tree-node *matTreeNodeDef="let node">
  ...
</mat-tree-node>

where node represents the TreeNode object.

Second being matTreeNodeDefWhen which is a function to filter the Tree nodes and can be defined as

HTML

<mat-tree-node *matTreeNodeDef="let node; when hasChild">
  ...
</mat-tree-node>

TS

hasChild = (_: number, node: FlatNode) => node.expandable;  // returns a boolean value

Generally speaking, a tree structure does not have an index.

Reference: https://material.angular.io/components/tree/api#MatTreeNodeDef

Answer 2

you will need to add index to the node with a transform function like: https://stackoverflow.com/a/57142368/11692089

Answer 3

I think it's not populating because you are not iterating. The let node; only declares node as the data source. Try let node of nodes or ngFor="let node of node; index as idx".

Answer 4

Depending on the task, the css counters could be a solution