docs(material/tree): update examples on docs pages, add new childrenA…

…ccessor examples (#29752)

* docs(mat/tree): add childrenAccessor example for mat-tree flat

* fix(mat/tree): fix imports

* docs(mat/tree): add childrenAccessor example for nested mat-tree

* fix(mat/tree): fix imports

* fix(mat/tree): formatting

(cherry picked from commit c4ca044)

src/cdk/tree/tree.md

@@ -19,7 +19,7 @@ are rendered as siblings in sequence.
 
 ```
 
-<!-- example(cdk-tree-flat) -->
+<!-- example(cdk-tree-flat-children-accessor) -->
 
 Flat trees are generally easier to style and inspect. They are also more friendly to scrolling
 variations, such as infinite or virtual scrolling.
@@ -40,7 +40,7 @@ contains a node outlet into which children are projected.
 </cdk-tree>
 ```
 
-<!-- example(cdk-tree-nested) -->
+<!-- example(cdk-tree-nested-children-accessor) -->
 
 Nested trees are easier to work with when hierarchical relationships are visually represented in
 ways that would be difficult to accomplish with flat nodes.

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

@@ -1,6 +1,8 @@
 export {TreeDynamicExample} from './tree-dynamic/tree-dynamic-example';
 export {TreeFlatOverviewExample} from './tree-flat-overview/tree-flat-overview-example';
+export {TreeFlatChildAccessorOverviewExample} from './tree-flat-child-accessor-overview/tree-flat-child-accessor-overview-example';
 export {TreeHarnessExample} from './tree-harness/tree-harness-example';
 export {TreeLoadmoreExample} from './tree-loadmore/tree-loadmore-example';
 export {TreeNestedOverviewExample} from './tree-nested-overview/tree-nested-overview-example';
+export {TreeNestedChildAccessorOverviewExample} from './tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example';
 export {TreeLegacyKeyboardInterfaceExample} from './tree-legacy-keyboard-interface/tree-legacy-keyboard-interface-example';

src/components-examples/material/tree/tree-flat-child-accessor-overview/tree-flat-child-accessor-overview-example.html

@@ -0,0 +1,19 @@
+<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
+ <!-- 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>
+ {{node.name}}
+ </mat-tree-node>
+ <!-- This is the tree node template for expandable nodes -->
+ <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodeToggle
+ [cdkTreeNodeTypeaheadLabel]="node.name">
+ <button mat-icon-button matTreeNodeToggle
+ [attr.aria-label]="'Toggle ' + node.name">
+ <mat-icon class="mat-icon-rtl-mirror">
+ {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+ </mat-icon>
+ </button>
+ {{node.name}}
+ </mat-tree-node>
+</mat-tree>

src/components-examples/material/tree/tree-flat-child-accessor-overview/tree-flat-child-accessor-overview-example.ts

@@ -0,0 +1,51 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatTreeModule} from '@angular/material/tree';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional 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: 'Brussels sprouts'}],
+ },
+ {
+ name: 'Orange',
+ children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+ },
+ ],
+ },
+];
+
+/**
+ * @title Tree with flat nodes (childrenAccessor)
+ */
+@Component({
+ selector: 'tree-flat-child-accessor-overview-example',
+ templateUrl: 'tree-flat-child-accessor-overview-example.html',
+ standalone: true,
+ imports: [MatTreeModule, MatButtonModule, MatIconModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeFlatChildAccessorOverviewExample {
+ dataSource = TREE_DATA;
+
+ childrenAccessor = (node: FoodNode) => node.children ?? [];
+
+ hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
+}

src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.css

@@ -0,0 +1,26 @@
+.example-tree-invisible {
+ display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+ margin-top: 0;
+ margin-bottom: 0;
+ list-style-type: none;
+}
+
+/*
+ * This padding sets alignment of the nested nodes.
+ */
+.example-tree .mat-nested-tree-node div[role=group] {
+ padding-left: 40px;
+}
+
+/*
+ * Padding for leaf nodes.
+ * Leaf nodes need to have padding so as to align with other non-leaf nodes
+ * under the same parent.
+ */
+.example-tree div[role=group] > .mat-tree-node {
+ padding-left: 40px;
+}

src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.html

@@ -0,0 +1,28 @@
+<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor" class="example-tree">
+ <!-- This is the tree node template for leaf nodes -->
+ <!-- There is inline padding applied to this node using styles.
+ This padding value depends on the mat-icon-button width. -->
+ <mat-tree-node *matTreeNodeDef="let node">
+ {{node.name}}
+ </mat-tree-node>
+ <!-- This is the tree node template for expandable nodes -->
+ <mat-nested-tree-node
+ *matTreeNodeDef="let node; when: hasChild"
+ matTreeNodeToggle [cdkTreeNodeTypeaheadLabel]="node.name">
+ <div class="mat-tree-node">
+ <button mat-icon-button matTreeNodeToggle
+ [attr.aria-label]="'Toggle ' + node.name">
+ <mat-icon class="mat-icon-rtl-mirror">
+ {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+ </mat-icon>
+ </button>
+ {{node.name}}
+ </div>
+ <!-- There is inline padding applied to this div using styles.
+ This padding value depends on the mat-icon-button width. -->
+ <div [class.example-tree-invisible]="!tree.isExpanded(node)"
+ role="group">
+ <ng-container matTreeNodeOutlet></ng-container>
+ </div>
+ </mat-nested-tree-node>
+</mat-tree>

src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.ts

@@ -0,0 +1,52 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatTreeModule} from '@angular/material/tree';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional 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: 'Brussels sprouts'}],
+ },
+ {
+ name: 'Orange',
+ children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+ },
+ ],
+ },
+];
+
+/**
+ * @title Tree with nested nodes (childrenAccessor)
+ */
+@Component({
+ selector: 'tree-nested-child-accessor-overview-example',
+ templateUrl: 'tree-nested-child-accessor-overview-example.html',
+ styleUrl: 'tree-nested-child-accessor-overview-example.css',
+ standalone: true,
+ imports: [MatTreeModule, MatButtonModule, MatIconModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeNestedChildAccessorOverviewExample {
+ childrenAccessor = (node: FoodNode) => node.children ?? [];
+
+ dataSource = TREE_DATA;
+
+ hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
+}

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

@@ -3,6 +3,10 @@
  <mat-expansion-panel-header>Flat tree</mat-expansion-panel-header>
  <tree-flat-overview-example></tree-flat-overview-example>
  </mat-expansion-panel>
+ <mat-expansion-panel>
+ <mat-expansion-panel-header>Flat tree (childrenAccessor)</mat-expansion-panel-header>
+ <tree-flat-child-accessor-overview-example></tree-flat-child-accessor-overview-example>
+ </mat-expansion-panel>
  <mat-expansion-panel>
  <mat-expansion-panel-header>CDK Flat tree</mat-expansion-panel-header>
  <cdk-tree-flat-example></cdk-tree-flat-example>
@@ -19,6 +23,10 @@
  <mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
  <tree-nested-overview-example></tree-nested-overview-example>
  </mat-expansion-panel>
+ <mat-expansion-panel>
+ <mat-expansion-panel-header>Nested tree (childrenAccessor)</mat-expansion-panel-header>
+ <tree-nested-child-accessor-overview-example></tree-nested-child-accessor-overview-example>
+ </mat-expansion-panel>
  <mat-expansion-panel>
  <mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
  <cdk-tree-nested-example></cdk-tree-nested-example>

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

@@ -24,6 +24,8 @@ import {
  TreeLegacyKeyboardInterfaceExample,
  TreeLoadmoreExample,
  TreeNestedOverviewExample,
+ TreeNestedChildAccessorOverviewExample,
+ TreeFlatChildAccessorOverviewExample,
 } from '@angular/components-examples/material/tree';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
@@ -54,10 +56,12 @@ import {MatTreeModule} from '@angular/material/tree';
  CommonModule,
  FormsModule,
  TreeDynamicExample,
+ TreeFlatChildAccessorOverviewExample,
  TreeFlatOverviewExample,
  TreeHarnessExample,
  TreeLegacyKeyboardInterfaceExample,
  TreeLoadmoreExample,
+ TreeNestedChildAccessorOverviewExample,
  TreeNestedOverviewExample,
  MatButtonModule,
  MatExpansionModule,

src/material/tree/tree.md

@@ -21,7 +21,7 @@ but instead are rendered as siblings in sequence.
 </mat-tree>
 ```
 
-<!-- example(tree-flat-overview) -->
+<!-- example(tree-flat-child-accessor-overview) -->
 
 Flat trees are generally easier to style and inspect. They are also more friendly to scrolling
 variations, such as infinite or virtual scrolling.
@@ -41,7 +41,7 @@ contains a node outlet into which children are projected.
 </mat-tree>
 ```
 
-<!-- example(tree-nested-overview) -->
+<!-- example(tree-nested-child-accessor-overview) -->
 
 Nested trees are easier to work with when hierarchical relationships are visually represented in
 ways that would be difficult to accomplish with flat nodes.