diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css
new file mode 100644
index 000000000000..8b1e8377f4d0
--- /dev/null
+++ b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css
@@ -0,0 +1,35 @@
+.example-tree-controls {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+
+.example-tree-output {
+ padding: 10px;
+ margin-bottom: 16px;
+ border: 1px solid var(--mat-sys-outline);
+ border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-tree {
+ padding: 10px;
+ border: 1px solid var(--mat-sys-outline);
+ border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-tree-item {
+ cursor: pointer;
+ user-select: none;
+ list-style: none;
+}
+
+.example-tree-item-content {
+ display: flex;
+ align-items: center;
+ padding: 2px 0; /* Minimal padding for item itself */
+}
+
+.example-tree-item-icon {
+ margin-right: 8px;
+}
diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html
new file mode 100644
index 000000000000..d24621bf023c
--- /dev/null
+++ b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html
@@ -0,0 +1,22 @@
+
+ @for (node of treeData; track node) {
+
+ }
+
+
+
+
+ @if (node.children) {
+
+
+ @for (child of node.children; track child) {
+
+ }
+
+
+ }
+
+
diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts
new file mode 100644
index 000000000000..6c3efa498397
--- /dev/null
+++ b/src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts
@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {
+ CdkTree,
+ CdkTreeItem,
+ CdkTreeItemGroup,
+ CdkTreeItemGroupContent,
+} from '@angular/cdk-experimental/tree';
+
+/** @title Tree using CdkTree and CdkTreeItem. */
+@Component({
+ selector: 'cdk-tree-single-select-example',
+ exportAs: 'cdkTreeSingleSelectExample',
+ templateUrl: 'cdk-tree-single-select-example.html',
+ styleUrl: 'cdk-tree-single-select-example.css',
+ imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
+})
+export class CdkTreeSingleSelectExample {
+ treeData = [
+ {
+ value: 'Fruits',
+ children: [{value: 'Apple'}, {value: 'Banana'}, {value: 'Cherry'}],
+ },
+ {
+ value: 'Vegetables',
+ children: [{value: 'Asparagus'}, {value: 'Broccoli'}, {value: 'Carrot'}],
+ },
+ {
+ value: 'Meat',
+ children: [
+ {
+ value: 'Red Meat',
+ children: [{value: 'Beef'}, {value: 'Goat'}, {value: 'Pork'}],
+ },
+ {
+ value: 'Poultry',
+ children: [{value: 'Chicken'}, {value: 'Turkey'}],
+ },
+ {
+ value: 'Seafood',
+ children: [
+ {value: 'Bass'},
+ {value: 'Crab'},
+ {value: 'Lobster'},
+ {value: 'Oyster'},
+ {value: 'Shrimp'},
+ ],
+ },
+ ],
+ },
+ ];
+}
diff --git a/src/components-examples/cdk-experimental/tree/index.ts b/src/components-examples/cdk-experimental/tree/index.ts
index 731d29286979..ca7bb14a6e7e 100644
--- a/src/components-examples/cdk-experimental/tree/index.ts
+++ b/src/components-examples/cdk-experimental/tree/index.ts
@@ -1 +1,2 @@
export {CdkTreeExample} from './cdk-tree/cdk-tree-example';
+export {CdkTreeSingleSelectExample} from './cdk-tree-single-select/cdk-tree-single-select-example';
diff --git a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html
index 76cfa8843aef..a6f4967f0f1f 100644
--- a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html
+++ b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.html
@@ -1,4 +1,9 @@
+
Single Select
+
+
+
+
diff --git a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts
index c9b973635b0a..a7b2826f660f 100644
--- a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts
+++ b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts
@@ -7,11 +7,11 @@
*/
import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {CdkTreeExample} from '@angular/components-examples/cdk-experimental/tree';
+import {CdkTreeSingleSelectExample} from '@angular/components-examples/cdk-experimental/tree';
@Component({
templateUrl: 'cdk-tree-demo.html',
- imports: [CdkTreeExample],
+ imports: [CdkTreeSingleSelectExample],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkExperimentalTreeDemo {}