How to get parent node of a selected mat-tree node

Question

I have implemented mat-tree in side nav of my application. I am successfully able to get details of my selected node. Now, what I want to achieve is to get the parent hierarchy of the selected node. Suppose, if I have a tree structure like below.

[
  {
    "name": "Fruit",
    "children": [
      {
        "name": "Apple"
      },
      {
        "name": "Banana"
      },
      {
        "name": "Fruit loops"
      }
    ]
  },
  {
    "name": "Vegetables",
    "children": [
      {
        "name": "Green",
        "children": [
          {
            "name": "Broccoli"
          },
          {
            "name": "Brussel sprouts"
          }
        ]
      },
      {
        "name": "Orange",
        "children": [
          {
            "name": "Pumpkins"
          },
          {
            "name": "Carrots"
          }
        ]
      }
    ]
  }
]

If I click on

Pumpkins

I want to get the hierarchy like this:

Vegetables/Orange/Pumpkins

which I can use in creating URL

My code is as below. html file

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    <span (click)="routeToPage($event)">
    {{node.name}}
    </span>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <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">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

component file

import {Component} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material';
import {BlogService} from '../../../../services/blog.service';

interface SideNavNode {
  name: string;
  children?: SideNavNode[];
}

interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css'],
})
export class SidenavComponent {


  treeControl = new FlatTreeControl<ExampleFlatNode>(
    node => node.level, node => node.expandable);

  private transformer = (node: SideNavNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level,
    };
  }

  treeFlattener = new MatTreeFlattener(
    this.transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor(private blogService: BlogService) {
    blogService.getTreeNodes().subscribe((data: SideNavNode[]) => this.dataSource.data = data);
  }

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;

  routeToPage(event: any) {
    this.blogService.selectedNode.next(event.target.innerText);
  }
}

Also my code in working state can be found here - https://stackblitz.com/github/vibhorgoyal18/atest-blog

Zeyad Habbab Zeyad Habbab · Accepted Answer · 2020-11-05T08:16:45

I Used this function to return the parent node.

getParent(node: FlatTreeNode) {
      const { treeControl } = this;
      const currentLevel = treeControl.getLevel(node);

      if (currentLevel < 1) {
        return null;
      }

      const index= treeControl.dataNodes.indexOf(node) - 1;

      for (let i = index; i >= 0; i--) {
        const currentNode = treeControl.dataNodes[i];

        if (treeControl.getLevel(currentNode) < currentLevel) {
          return currentNode;
        }
      }
}

How to get parent node of a selected mat-tree node

1 Answers