feat(cdk/tree): add examples, fix bugs

Author: BobobUnicorn

src/cdk/tree/tree.ts

@@ -931,9 +931,9 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   }
   set isExpanded(isExpanded: boolean) {
     if (isExpanded) {
-      this._tree.expand(this.data);
+      this.expand();
     } else {
-      this._tree.collapse(this.data);
+      this.collapse();
     }
   }
 
@@ -947,6 +947,10 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   @Output()
   readonly activation: EventEmitter<T> = new EventEmitter<T>();
 
+  /** This emits when the node's expansion status has been changed. */
+  @Output()
+  readonly expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   /**
    * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
    * in `CdkTree` and set the data to it.
@@ -1042,11 +1046,13 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   /** Collapses this data node. Implemented for TreeKeyManagerItem. */
   collapse(): void {
     this._tree.collapse(this._data);
+    this.expandedChange.emit(this.isExpanded);
   }
 
   /** Expands this data node. Implemented for TreeKeyManagerItem. */
   expand(): void {
     this._tree.expand(this._data);
+    this.expandedChange.emit(this.isExpanded);
   }
 
   _setTabFocusable() {

src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html

@@ -2,6 +2,7 @@
   <!-- This is the tree node template for leaf nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
@@ -10,10 +11,11 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
+                 (expandedChange)="node.isExpanded = $event"
                  class="example-tree-node">
     <button mat-icon-button cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name"
-            (click)="node.isExpanded = !node.isExpanded"
             [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}

src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html

@@ -1,12 +1,18 @@
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <!-- This is the tree node template for leaf nodes -->
-  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
+      *cdkTreeNodeDef="let node"
+      [isDisabled]="!!treeNode.getParent()?.isExpanded"
+      class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild" class="example-tree-node">
+  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
+      *cdkTreeNodeDef="let node; when: hasChild"
+      [isDisabled]="!!treeNode.getParent()?.isExpanded"
+      class="example-tree-node">
     <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}