feat(cdk/tree): add demo for NestedTreeNode w/childrenAccessor

src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css

@@ -0,0 +1,18 @@
+.example-tree-invisible {
+  display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+}
+.example-tree-node {
+  display: block;
+  line-height: 40px;
+}
+
+.example-tree-node .example-tree-node {
+  padding-left: 40px;
+}

src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html

@@ -0,0 +1,25 @@
+<cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
+  <!-- This is the tree node template for leaf nodes -->
+  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
+      class="example-tree-node">
+    <!-- use a disabled button to provide padding for tree leaf -->
+    <button mat-icon-button disabled></button>
+    {{node.name}}
+  </cdk-nested-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
+      cdkTreeNodeToggle
+      *cdkTreeNodeDef="let node; when: hasChild"
+      isExpandable
+      class="example-tree-node">
+    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    {{node.name}}
+    <div [class.example-tree-invisible]="!tree.isExpanded(node)">
+      <ng-container cdkTreeNodeOutlet></ng-container>
+    </div>
+  </cdk-nested-tree-node>
+</cdk-tree>

src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts

@@ -0,0 +1,53 @@
+import {ArrayDataSource} from '@angular/cdk/collections';
+import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
+import {Component, ViewChild} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {NestedFoodNode, NESTED_DATA} from '../tree-data';
+
+function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
+  const flattenedNodes = [];
+  for (const node of nodes) {
+    flattenedNodes.push(node);
+    if (node.children) {
+      flattenedNodes.push(...flattenNodes(node.children));
+    }
+  }
+  return flattenedNodes;
+}
+
+/**
+ * @title Tree with nested nodes, using childAccessor
+ */
+@Component({
+  selector: 'cdk-tree-nested-children-accessor-example',
+  templateUrl: 'cdk-tree-nested-children-accessor-example.html',
+  styleUrls: ['cdk-tree-nested-children-accessor-example.css'],
+  standalone: true,
+  imports: [CdkTreeModule, MatButtonModule, MatIconModule],
+})
+export class CdkTreeNestedChildrenAccessorExample {
+  @ViewChild(CdkTree) tree: CdkTree<NestedFoodNode>;
+
+  childrenAccessor = (dataNode: NestedFoodNode) => dataNode.children ?? [];
+
+  dataSource = new ArrayDataSource(NESTED_DATA);
+
+  hasChild = (_: number, node: NestedFoodNode) => !!node.children && node.children.length > 0;
+
+  getParentNode(node: NestedFoodNode) {
+    for (const parent of flattenNodes(NESTED_DATA)) {
+      if (parent.children?.includes(node)) {
+        return parent;
+      }
+    }
+
+    return null;
+  }
+
+  shouldRender(node: NestedFoodNode): boolean {
+    // This node should render if it is a root node or if all of its ancestors are expanded.
+    const parent = this.getParentNode(node);
+    return !parent || (!!this.tree?.isExpanded(parent) && this.shouldRender(parent));
+  }
+}

src/components-examples/cdk/tree/index.ts

@@ -2,5 +2,6 @@ export {CdkTreeFlatChildrenAccessorExample} from './cdk-tree-flat-children-acces
 export {CdkTreeFlatLevelAccessorExample} from './cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example';
 export {CdkTreeFlatExample} from './cdk-tree-flat/cdk-tree-flat-example';
 export {CdkTreeNestedLevelAccessorExample} from './cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example';
+export {CdkTreeNestedChildrenAccessorExample} from './cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example';
 export {CdkTreeNestedExample} from './cdk-tree-nested/cdk-tree-nested-example';
 export {CdkTreeComplexExample} from './cdk-tree-complex/cdk-tree-complex-example';

src/dev-app/tree/tree-demo.html

@@ -27,6 +27,10 @@
     <mat-expansion-panel-header>CDK Nested tree (levelAccessor)</mat-expansion-panel-header>
     <cdk-tree-nested-level-accessor-example></cdk-tree-nested-level-accessor-example>
   </mat-expansion-panel>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>CDK Nested tree (childrenAccessor)</mat-expansion-panel-header>
+    <cdk-tree-nested-children-accessor-example></cdk-tree-nested-children-accessor-example>
+  </mat-expansion-panel>
   <mat-expansion-panel>
     <mat-expansion-panel-header>Dynamic flat tree</mat-expansion-panel-header>
     <tree-dynamic-example></tree-dynamic-example>

src/dev-app/tree/tree-demo.ts

@@ -13,6 +13,7 @@ import {
   CdkTreeNestedExample,
   CdkTreeFlatLevelAccessorExample,
   CdkTreeNestedLevelAccessorExample,
+  CdkTreeNestedChildrenAccessorExample,
   CdkTreeFlatChildrenAccessorExample,
   CdkTreeComplexExample,
 } from '@angular/components-examples/cdk/tree';
@@ -44,6 +45,7 @@ import {MatTreeModule} from '@angular/material/tree';
     CdkTreeNestedExample,
     CdkTreeFlatChildrenAccessorExample,
     CdkTreeFlatLevelAccessorExample,
+    CdkTreeNestedChildrenAccessorExample,
     CdkTreeNestedLevelAccessorExample,
     CdkTreeComplexExample,
     CommonModule,