docs(cdk-experimental/tree): add examples to the dev-app

src/components-examples/cdk-experimental/tree/cdk-tree-active-descendant/cdk-tree-active-descendant-example.html

@@ -0,0 +1,35 @@
+<ul cdkTree focusMode="activedescendant" #tree="cdkTree" class="example-tree">
+  <ng-template
+    [ngTemplateOutlet]="treeNodes"
+    [ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
+  />
+</ul>
+
+<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+  @for (node of nodes; track node.value) {
+  <li
+    cdkTreeItem
+    [parent]="parent"
+    [value]="node.value"
+    [label]="node.name"
+    [disabled]="node.disabled"
+    #treeItem="cdkTreeItem"
+    class="example-tree-item example-selectable example-stateful"
+  >
+    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
+    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
+    {{ node.name }}
+    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
+  </li>
+
+  @if (node.children) {
+  <ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
+    <ng-template cdkTreeItemGroupContent>
+      <ng-template
+        [ngTemplateOutlet]="treeNodes"
+        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+      />
+    </ng-template>
+  </ul>
+  } }
+</ng-template>

src/components-examples/cdk-experimental/tree/cdk-tree-active-descendant/cdk-tree-active-descendant-example.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {
+  CdkTree,
+  CdkTreeItem,
+  CdkTreeItemGroup,
+  CdkTreeItemGroupContent,
+} from '@angular/cdk-experimental/tree';
+import {TreeNode, NODES} from '../tree-data';
+
+/**
+ * @title Tree with active descendant focus.
+ */
+@Component({
+  selector: 'cdk-tree-active-descendant-example',
+  exportAs: 'cdkTreeActiveDescendantExample',
+  templateUrl: 'cdk-tree-active-descendant-example.html',
+  styleUrl: '../tree-common.css',
+  standalone: true,
+  imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
+})
+export class CdkTreeActiveDescendantExample {
+  nodes: TreeNode[] = NODES;
+}

src/components-examples/cdk-experimental/tree/cdk-tree-configurable/cdk-tree-configurable-example.html

@@ -0,0 +1,76 @@
+<div class="example-tree-controls">
+  <mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
+  <mat-checkbox [formControl]="multi">Multi</mat-checkbox>
+  <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
+  <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
+  <mat-checkbox [formControl]="nav">Nav Mode</mat-checkbox>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Selection Strategy</mat-label>
+    <mat-select [(value)]="selectionMode">
+      <mat-option value="explicit">Explicit</mat-option>
+      <mat-option value="follow">Follow</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Focus Strategy</mat-label>
+    <mat-select [(value)]="focusMode">
+      <mat-option value="roving">Roving</mat-option>
+      <mat-option value="activedescendant">Active Descendant</mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+
+<div class="example-tree-output">
+  <strong>Selected Values:</strong> {{ selectedValues().join(', ') || 'None' }}
+</div>
+
+<ul
+  cdkTree
+  class="example-tree"
+  [multi]="multi.value"
+  [disabled]="disabled.value"
+  [selectionMode]="selectionMode"
+  [focusMode]="focusMode"
+  [wrap]="wrap.value"
+  [skipDisabled]="skipDisabled.value"
+  [nav]="nav.value"
+  [(value)]="selectedValues"
+  #tree="cdkTree"
+>
+  <ng-template
+    [ngTemplateOutlet]="treeNodes"
+    [ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
+  />
+</ul>
+
+<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+  @for (node of nodes; track node.value) {
+  <li
+    cdkTreeItem
+    [parent]="parent"
+    [value]="node.value"
+    [label]="node.name"
+    [disabled]="node.disabled"
+    #treeItem="cdkTreeItem"
+    class="example-tree-item example-selectable example-stateful"
+  >
+    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
+    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
+    {{ node.name }}
+    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
+  </li>
+
+  @if (node.children) {
+  <ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
+    <ng-template cdkTreeItemGroupContent>
+      <ng-template
+        [ngTemplateOutlet]="treeNodes"
+        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+      />
+    </ng-template>
+  </ul>
+  }
+  }
+</ng-template>

src/components-examples/cdk-experimental/tree/cdk-tree-configurable/cdk-tree-configurable-example.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import {Component, model} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {
+  CdkTree,
+  CdkTreeItem,
+  CdkTreeItemGroup,
+  CdkTreeItemGroupContent,
+} from '@angular/cdk-experimental/tree';
+import {NODES, TreeNode} from '../tree-data';
+
+/** @title Configurable Tree. */
+@Component({
+  selector: 'cdk-tree-configurable-example',
+  exportAs: 'cdkTreeConfigurableExample',
+  templateUrl: 'cdk-tree-configurable-example.html',
+  styleUrl: '../tree-common.css',
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    NgTemplateOutlet,
+    CdkTree,
+    CdkTreeItem,
+    CdkTreeItemGroup,
+    CdkTreeItemGroupContent,
+  ],
+})
+export class CdkTreeConfigurableExample {
+  nodes: TreeNode[] = NODES;
+
+  selectionMode: 'explicit' | 'follow' = 'explicit';
+  focusMode: 'roving' | 'activedescendant' = 'roving';
+
+  multi = new FormControl(false, {nonNullable: true});
+  disabled = new FormControl(false, {nonNullable: true});
+  wrap = new FormControl(true, {nonNullable: true});
+  skipDisabled = new FormControl(true, {nonNullable: true});
+  nav = new FormControl(false, {nonNullable: true});
+
+  selectedValues = model<string[]>(['package.json']);
+}

src/components-examples/cdk-experimental/tree/cdk-tree-disabled-focusable/cdk-tree-disabled-focusable-example.html

@@ -0,0 +1,35 @@
+<ul cdkTree [skipDisabled]="false" #tree="cdkTree" class="example-tree">
+  <ng-template
+    [ngTemplateOutlet]="treeNodes"
+    [ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
+  />
+</ul>
+
+<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+  @for (node of nodes; track node.value) {
+  <li
+    cdkTreeItem
+    [parent]="parent"
+    [value]="node.value"
+    [label]="node.name"
+    [disabled]="node.disabled"
+    #treeItem="cdkTreeItem"
+    class="example-tree-item example-selectable example-stateful"
+  >
+    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
+    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
+    {{ node.name }}
+    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
+  </li>
+
+  @if (node.children) {
+  <ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
+    <ng-template cdkTreeItemGroupContent>
+      <ng-template
+        [ngTemplateOutlet]="treeNodes"
+        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+      />
+    </ng-template>
+  </ul>
+  } }
+</ng-template>

src/components-examples/cdk-experimental/tree/cdk-tree-disabled-focusable/cdk-tree-disabled-focusable-example.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {
+  CdkTree,
+  CdkTreeItem,
+  CdkTreeItemGroup,
+  CdkTreeItemGroupContent,
+} from '@angular/cdk-experimental/tree';
+import {TreeNode, NODES} from '../tree-data';
+
+/**
+ * @title Tree with focusable disabled items.
+ */
+@Component({
+  selector: 'cdk-tree-disabled-focusable-example',
+  exportAs: 'cdkTreeDisabledFocusableExample',
+  templateUrl: 'cdk-tree-disabled-focusable-example.html',
+  styleUrl: '../tree-common.css',
+  standalone: true,
+  imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
+})
+export class CdkTreeDisabledFocusableExample {
+  nodes: TreeNode[] = NODES;
+}

src/components-examples/cdk-experimental/tree/cdk-tree-disabled-skipped/cdk-tree-disabled-skipped-example.html

@@ -0,0 +1,35 @@
+<ul cdkTree [skipDisabled]="true" #tree="cdkTree" class="example-tree">
+  <ng-template
+    [ngTemplateOutlet]="treeNodes"
+    [ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
+  />
+</ul>
+
+<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+  @for (node of nodes; track node.value) {
+  <li
+    cdkTreeItem
+    [parent]="parent"
+    [value]="node.value"
+    [label]="node.name"
+    [disabled]="node.disabled"
+    #treeItem="cdkTreeItem"
+    class="example-tree-item example-selectable example-stateful"
+  >
+    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
+    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
+    {{ node.name }}
+    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
+  </li>
+
+  @if (node.children) {
+  <ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
+    <ng-template cdkTreeItemGroupContent>
+      <ng-template
+        [ngTemplateOutlet]="treeNodes"
+        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+      />
+    </ng-template>
+  </ul>
+  } }
+</ng-template>

src/components-examples/cdk-experimental/tree/cdk-tree-disabled-skipped/cdk-tree-disabled-skipped-example.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {
+  CdkTree,
+  CdkTreeItem,
+  CdkTreeItemGroup,
+  CdkTreeItemGroupContent,
+} from '@angular/cdk-experimental/tree';
+import {TreeNode, NODES} from '../tree-data';
+
+/**
+ * @title Tree with skipped disabled items.
+ */
+@Component({
+  selector: 'cdk-tree-disabled-skipped-example',
+  exportAs: 'cdkTreeDisabledSkippedExample',
+  templateUrl: 'cdk-tree-disabled-skipped-example.html',
+  styleUrl: '../tree-common.css',
+  standalone: true,
+  imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
+})
+export class CdkTreeDisabledSkippedExample {
+  nodes: TreeNode[] = NODES;
+}

src/components-examples/cdk-experimental/tree/cdk-tree-disabled/cdk-tree-disabled-example.html

@@ -0,0 +1,35 @@
+<ul cdkTree [disabled]="true" #tree="cdkTree" class="example-tree">
+  <ng-template
+    [ngTemplateOutlet]="treeNodes"
+    [ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
+  />
+</ul>
+
+<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+  @for (node of nodes; track node.value) {
+  <li
+    cdkTreeItem
+    [parent]="parent"
+    [value]="node.value"
+    [label]="node.name"
+    [disabled]="node.disabled"
+    #treeItem="cdkTreeItem"
+    class="example-tree-item example-selectable example-stateful"
+  >
+    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
+    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
+    {{ node.name }}
+    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
+  </li>
+
+  @if (node.children) {
+  <ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
+    <ng-template cdkTreeItemGroupContent>
+      <ng-template
+        [ngTemplateOutlet]="treeNodes"
+        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+      />
+    </ng-template>
+  </ul>
+  } }
+</ng-template>