title: How to get node siblings in an Angular Material nested tree?
body: <p>I'm trying to fetch the list of sibling nodes for a given Angular Material tree node in a nested tree.</p>
  
  <p>I'm going through Angular Material official <a href="https://material.angular.io/components/tree/examples" rel="nofollow noreferrer">docs</a>, and specifically dabbling with the "Tree with nested nodes". Neither <code>NestedTreeControl</code> nor the <code>SelectionModel</code> I was able to get to via <code>@angular/cdk/collections</code> provide ways to access or even see the sibling nodes for a given node. They don't even offer a way to know on what level of the NESTED tree you're node is, unless you're using the flat tree.</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree"&gt;
    &lt;!-- This is the tree node template for leaf nodes --&gt;
    &lt;mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle&gt;
      &lt;li class="mat-tree-node"&gt;
        &lt;!-- use a disabled button to provide padding for tree leaf --&gt;
        &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
        {{node.name}}
      &lt;/li&gt;
    &lt;/mat-tree-node&gt;
    &lt;!-- This is the tree node template for expandable nodes --&gt;
    &lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild"&gt;
      &lt;li&gt;
        &lt;div class="mat-tree-node"&gt;
          &lt;button mat-icon-button matTreeNodeToggle
                  [attr.aria-label]="'toggle ' + node.name"&gt;
            &lt;mat-icon class="mat-icon-rtl-mirror"&gt;
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            &lt;/mat-icon&gt;
          &lt;/button&gt;
          {{node.name}}
        &lt;/div&gt;
        &lt;ul [class.example-tree-invisible]="!treeControl.isExpanded(node)"&gt;
          &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/mat-nested-tree-node&gt;
  &lt;/mat-tree&gt;
  </code></pre>
  
  <p>This is the class code</p>
  
  <pre><code>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 optiona list of children.
   */
  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'},
          ]
        },
      ]
    },
  ];
  
  /**
   * @title Tree with nested nodes
   */
  @Component({
    selector: 'tree-nested-overview-example',
    templateUrl: 'tree-nested-overview-example.html',
    styleUrls: ['tree-nested-overview-example.css'],
  })
  export class TreeNestedOverviewExample {
    treeControl = new NestedTreeControl&lt;FoodNode&gt;(node =&gt; node.children);
    dataSource = new MatTreeNestedDataSource&lt;FoodNode&gt;();
  
    constructor() {
      this.dataSource.data = TREE_DATA;
    }
  
    hasChild = (_: number, node: FoodNode) =&gt; !!node.children &amp;&amp; node.children.length &gt; 0;
  }
  </code></pre>
  
  <p>and some CSS</p>
  
  <pre><code>.example-tree-invisible {
    display: none;
  }
  
  .example-tree ul,
  .example-tree li {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
  }
  </code></pre>
  
  <p>I just need a way to access the sibling nodes. I also really need to know what level I'm on based on the node I'm at when I'm using the NESTED tree.</p>