Angular Material In Depth

Author: Your Name

src/app/app.component.html

@@ -20,6 +20,11 @@
                 <span>Drag and Drop</span>
             </a>
 
+            <a mat-list-item routerLink="tree-demo">
+                <mat-icon>park</mat-icon>
+                <span>Tree Demo</span>
+            </a>
+
             <a mat-list-item>
                 <mat-icon>person_add</mat-icon>
                 <span>Register</span>

src/app/tree-demo/tree-demo.component.html

@@ -3,6 +3,49 @@
 
   <h3>Nested Tree Demo</h3>
 
+  <mat-tree
+          class="example-tree mat-elevation-z4"
+          [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+
+      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+
+          {{node.name}}
+
+      </mat-tree-node>
+
+
+      <mat-nested-tree-node  *matTreeNodeDef="let node; when: hasNestedChild">
+
+          <div class="mat-tree-node">
+
+              <button mat-icon-button matTreeNodeToggle>
+
+                  <mat-icon>
+
+                      {{ nestedTreeControl.isExpanded(node) ? "expand_more": "chevron_right" }}
+
+                  </mat-icon>
+
+              </button>
+
+              {{node.name}}
+
+          </div>
+
+          <div class="nested-node"
+               [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+
+              <ng-container matTreeNodeOutlet></ng-container>
+
+          </div>
+
+      </mat-nested-tree-node>
+
+
+  </mat-tree>
+
+
+
   <h3>Flat Tree Demo</h3>
 
 </div>

src/app/tree-demo/tree-demo.component.scss

@@ -29,7 +29,7 @@
 /*
  * This padding sets alignment of the nested nodes.
  */
-.example-tree .mat-nested-tree-node div[role=group] {
+.example-tree .mat-nested-tree-node .nested-node {
   padding-left: 40px;
 }
 
@@ -38,6 +38,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 .nested-node > .mat-tree-node {
   padding-left: 40px;
 }

src/app/tree-demo/tree-demo.component.ts

@@ -58,11 +58,22 @@ const TREE_DATA: CourseNode[] = [
 })
 export class TreeDemoComponent implements OnInit {
 
+  nestedDataSource = new MatTreeNestedDataSource<CourseNode>();
+
+  nestedTreeControl = new NestedTreeControl<CourseNode>(node => node.children);
+
+
   ngOnInit() {
 
+      this.nestedDataSource.data = TREE_DATA;
+
 
   }
 
+    hasNestedChild(index: number, node:CourseNode) {
+      return node?.children?.length > 0;
+    }
+
 }