Getting node siblings within an Angular Material nested tree: A comprehensive guide

Question

Getting node siblings within an Angular Material nested tree: A comprehensive guide

Struggling to retrieve the list of sibling nodes for a specific Angular Material tree node within a nested tree structure.

After exploring the Angular Material official documentation, particularly experimenting with the "Tree with nested nodes," I found that neither the NestedTreeControl nor the SelectionModel available through @angular/cdk/collections offer a direct way to access or visualize the sibling nodes of a given node. It's also challenging to determine the level of the NESTED tree where a node is located unless using the flat tree implementation.

Below is the HTML snippet:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
  <!-- Tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <button mat-icon-button disabled></button>
      {{node.name}}
    </li>
  </mat-tree-node>
  <!-- Tree node template for expandable nodes -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <li>
      <div class="mat-tree-node">
        <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}}
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

Here is the accompanying class code:

import {NestedTreeControl} from '@angular/cdk/tree';
import {Component} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';

// Food data structure with nesting
interface FoodNode {
  name: string;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    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'},
        ]
      },
    ]
  },
];

// Component definition
@Component({
  selector: 'tree-nested-overview-example',
  templateUrl: 'tree-nested-overview-example.html',
  styleUrls: ['tree-nested-overview-example.css'],
})
export class TreeNestedOverviewExample {
  // Creating tree control and data source
  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
}

And some CSS styling:

.example-tree-invisible {
  display: none;
}

.example-tree ul,
.example-tree li {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

The main challenge lies in accessing the sibling nodes within the NESTED tree structure and determining the exact level based on the current node being processed.

angular typescript angular-material2 angular-cdk

Answer 1

Answer №1

If you're seeking a solution to a similar issue, here's how I tackled my problem.

To start, establish custom data attributes for the node class. Here's what my node class looks like now:


import {NestedTreeControl} from '@angular/cdk/tree';
import {Component} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';

/**
 * Food data with nested structure.
 * Each node has a name and an optional list of children.
 */
interface FoodNode {
  name: string;
  children?: FoodNode[];
}

export class FoodNode {
  children: BehaviorSubject<FoodNode[]>;
  constructor(
    public name: string,
    public type: string,
    public id: number,
    children?: FoodNode[],
    public parent?: FoodNode,
    public level = 0
  ) {
    this.children = new BehaviorSubject(children === undefined ? [] : children);
  }
}

Next, here is the code for the nested tree class.

import { NestedTreeControl } from '@angular/cdk/tree';

export class NestedTreeComponent implements OnInit, OnDestroy {
  // TREE CONTROLS
  treeControl: NestedTreeControl<FoodNode>;
  foodTreeLevels = [];
  treeDepth = 1; // initialize tree with default depth 1

  ngOnInit() {
   // initialize tree controls and data source
   this.treeControl = new NestedTreeControl<FoodNode>(this.getChildren);
  }

  /** Get node children */
  getChildren = (node: FoodNode): Observable<FoodNode[]> => node.children;

  /**
   * @desc Add the node to its parent's children object
   */
  addNewFood(parent: FoodNode, foodName: string, foodType: string, foodId: number) {
    // Add the food to the list of children
    const child = new FoodNode(foodName, foodType, foodId, [], parent, 0);
    child.level = parent.level + 1;
    // add a new level to the tree if the parent of this node has no children yet
    if (parent && parent.children.value.length === 0 && !this.foodTreeLevels.includes(child.level)) {
      this.foodTreeLevels.push(child.level);
      this.treeDepth += 1;
    }
    // update the parents' children with this newly added node if the parent exists
    if (parent) {
      const children = parent.children.value;
      children.push(child);
      parent.children.next(children);
   }

  }

Now, to access the siblings of any node in the tree, simply go to the node's parent and retrieve all its children like so:

// This is a node of type FoodNode
const parent = theNodeINeedToGetSiblingsFor.parent; 
const siblings = parent.children.value;

Answer 2

If you're seeking a solution to a similar issue, here's how I tackled my problem.

To start, establish custom data attributes for the node class. Here's what my node class looks like now:


import {NestedTreeControl} from '@angular/cdk/tree';
import {Component} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';

/**
 * Food data with nested structure.
 * Each node has a name and an optional list of children.
 */
interface FoodNode {
  name: string;
  children?: FoodNode[];
}

export class FoodNode {
  children: BehaviorSubject<FoodNode[]>;
  constructor(
    public name: string,
    public type: string,
    public id: number,
    children?: FoodNode[],
    public parent?: FoodNode,
    public level = 0
  ) {
    this.children = new BehaviorSubject(children === undefined ? [] : children);
  }
}

Next, here is the code for the nested tree class.

import { NestedTreeControl } from '@angular/cdk/tree';

export class NestedTreeComponent implements OnInit, OnDestroy {
  // TREE CONTROLS
  treeControl: NestedTreeControl<FoodNode>;
  foodTreeLevels = [];
  treeDepth = 1; // initialize tree with default depth 1

  ngOnInit() {
   // initialize tree controls and data source
   this.treeControl = new NestedTreeControl<FoodNode>(this.getChildren);
  }

  /** Get node children */
  getChildren = (node: FoodNode): Observable<FoodNode[]> => node.children;

  /**
   * @desc Add the node to its parent's children object
   */
  addNewFood(parent: FoodNode, foodName: string, foodType: string, foodId: number) {
    // Add the food to the list of children
    const child = new FoodNode(foodName, foodType, foodId, [], parent, 0);
    child.level = parent.level + 1;
    // add a new level to the tree if the parent of this node has no children yet
    if (parent && parent.children.value.length === 0 && !this.foodTreeLevels.includes(child.level)) {
      this.foodTreeLevels.push(child.level);
      this.treeDepth += 1;
    }
    // update the parents' children with this newly added node if the parent exists
    if (parent) {
      const children = parent.children.value;
      children.push(child);
      parent.children.next(children);
   }

  }

Now, to access the siblings of any node in the tree, simply go to the node's parent and retrieve all its children like so:

// This is a node of type FoodNode
const parent = theNodeINeedToGetSiblingsFor.parent; 
const siblings = parent.children.value;

Getting node siblings within an Angular Material nested tree: A comprehensive guide

Answer №1

Similar questions

Combining default and named exports in Rollup configuration

Observing changes in the DOM using Angular

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

A guide on implementing a "Select All" trigger in mat-select with Angular8/Material

Is it possible to use string indexes with jQuery each method in Typescript?

Showing container element only if certain condition is met but display the children in Angular 2+

Exploring a JSON object using PlaywrightWould you like to know how

When I attempt to add a todo item by clicking, the Url value is displayed as "undefined"

Angular 2 smart table row indexing

Displaying time in weekly view on the Angular 4.0 calendar

Tips on preventing the copying of .txt and .xml files with the fs-extra.copySync function

Is it possible to dynamically close the parent modal based on input from the child component?

Encountering ReferenceError when attempting to declare a variable in TypeScript from an external file because it is not defined

What is the process of creating a callback in Angular using TypeScript?

How to check all checkboxes in Angular using ngFor and ngIf?

Communicating data between Angular components that have no direct binding or relationship

Problem with Scroll Listener on Image in Angular 4: Window Scroll Functioning Properly

React's memo and/or useCallback functions are not functioning as anticipated

Mental stability groq fails to provide the requested information

Angular Forms testing with Karma Unit Testing is throwing the following error message: ""