fix(cdk/tree): fix broken examples in stackblitz (#30387)

resolves #30159

(cherry picked from commit 8b876d8)

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

@@ -0,0 +1,28 @@
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional list of children.
+ */
+export interface NestedFoodNode {
+  name: string;
+  children?: NestedFoodNode[];
+}
+
+export const NESTED_DATA: NestedFoodNode[] = [
+  {
+    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'}],
+      },
+    ],
+  },
+];

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

@@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {timer} from 'rxjs';
 import {mapTo} from 'rxjs/operators';
-import {NestedFoodNode, NESTED_DATA} from '../tree-data';
+import {NestedFoodNode, NESTED_DATA} from './cdk-tree-flat-children-accessor-example-data';
 
 function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
   const flattenedNodes = [];

src/components-examples/cdk/tree/tree-data.ts → src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example-data.ts

@@ -63,32 +63,3 @@ export const FLAT_DATA: FlatFoodNode[] = [
     level: 2,
   },
 ];
-
-/**
- * Food data with nested structure.
- * Each node has a name and an optional list of children.
- */
-export interface NestedFoodNode {
-  name: string;
-  children?: NestedFoodNode[];
-}
-
-export const NESTED_DATA: NestedFoodNode[] = [
-  {
-    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'}],
-      },
-    ],
-  },
-];

src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts

@@ -3,7 +3,7 @@ import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {FlatFoodNode, FLAT_DATA} from '../tree-data';
+import {FlatFoodNode, FLAT_DATA} from './cdk-tree-flat-level-accessor-example-data';
 
 /**
  * @title Tree with flat nodes

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

@@ -0,0 +1,28 @@
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional list of children.
+ */
+export interface NestedFoodNode {
+  name: string;
+  children?: NestedFoodNode[];
+}
+
+export const NESTED_DATA: NestedFoodNode[] = [
+  {
+    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'}],
+      },
+    ],
+  },
+];

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

@@ -3,7 +3,7 @@ import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {NestedFoodNode, NESTED_DATA} from '../tree-data';
+import {NestedFoodNode, NESTED_DATA} from './cdk-tree-nested-children-accessor-example-data';
 
 function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
   const flattenedNodes = [];

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

@@ -0,0 +1,65 @@
+/** Flat node with expandable and level information */
+export interface FlatFoodNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+  isExpanded?: boolean;
+}
+
+export const FLAT_DATA: FlatFoodNode[] = [
+  {
+    name: 'Fruit',
+    expandable: true,
+    level: 0,
+  },
+  {
+    name: 'Apple',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Banana',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Fruit loops',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Vegetables',
+    expandable: true,
+    level: 0,
+  },
+  {
+    name: 'Green',
+    expandable: true,
+    level: 1,
+  },
+  {
+    name: 'Broccoli',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Brussels sprouts',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Orange',
+    expandable: true,
+    level: 1,
+  },
+  {
+    name: 'Pumpkins',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Carrots',
+    expandable: false,
+    level: 2,
+  },
+];

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

@@ -3,7 +3,7 @@ import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {FLAT_DATA, FlatFoodNode} from '../tree-data';
+import {FLAT_DATA, FlatFoodNode} from './cdk-tree-nested-level-accessor-example-data';
 
 /**
  * @title Tree with nested nodes and level accessor