docs(material/tree): fixed mixed node types

Fixes docs that were combining flat and nested tree nodes.

Author: crisbeto

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

@@ -21,6 +21,6 @@
  * 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 {
+.example-tree div[role=group] > .mat-nested-tree-node {
   padding-left: 40px;
 }

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

@@ -2,9 +2,9 @@
   <!-- 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">
+  <mat-nested-tree-node *matTreeNodeDef="let node">
     {{node.name}}
-  </mat-tree-node>
+  </mat-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-nested-tree-node
       *matTreeNodeDef="let node; when: hasChild"

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

@@ -15,23 +15,33 @@ interface FoodNode {
 const TREE_DATA: FoodNode[] = [
   {
     name: 'Fruit',
-    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
+    // children: [{name: 'Apple', children: []}],
+    children: [],
   },
   {
     name: 'Vegetables',
     children: [
       {
         name: 'Green',
-        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
-      },
-      {
-        name: 'Orange',
-        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+        // children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
+        children: [],
       },
+      // {
+      //   name: 'Orange',
+      //   // children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+      //   children: [],
+      // },
     ],
   },
 ];
 
+// Object.defineProperty(TREE_DATA[0], 'children', {
+//   get: () => {
+//     debugger;
+//     return [];
+//   },
+// });
+
 /**
  * @title Tree with nested nodes (childrenAccessor)
  */

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

@@ -21,6 +21,6 @@
  * 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 {
+.example-tree div[role=group] > .mat-nested-tree-node {
   padding-left: 40px;
 }

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

@@ -2,9 +2,9 @@
   <!-- 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">
+  <mat-nested-tree-node *matTreeNodeDef="let node">
     {{node.name}}
-  </mat-tree-node>
+  </mat-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-nested-tree-node
       *matTreeNodeDef="let node; when: hasChild"