How i do indexing in mat-tree in angular? Its easy to do indexing and row highlighted in Simple Table but Not for Mat-Tree

Question

I need this type of solution for mat-tree. I tried hard but can't able to find a solution .

https://stackblitz.com/edit/angular-mat-highlight-row-on-conditions

Answer 1

can not add as data to your mat-tree a new properties and change the class or the style according this new variable? -or using children if the only thing you need is mark the nodes with children

const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',index:0,
    children: [
      {name: 'Apple',index:0},
      {name: 'Banana'},
      {name: 'Fruit loops'},
    ]
  }, ...

private _transformer = (node: FoodNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      index:node.index, //<--DON'T FORGET THIS
      level: level,
    };
  }

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding 
     [style.background-color]="node.index==0?'orange':null">
    <button mat-icon-button disabled></button>
    <span >{{node.name}}</span>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding
     [style.background-color]="node.index==0?'yellow':null">
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    <span>{{node.name}}</span>
  </mat-tree-node>
</mat-tree>

stackblitz