Angular Material In Depth - preparation for the material tree section

Author: jhades

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import {CourseComponent} from "./course/course.component";
 import {CourseResolver} from "./services/course.resolver";
 import {CreateCourseComponent} from './create-course/create-course.component';
 import {DragDropComponent} from './drag-drop/drag-drop.component';
+import {TreeDemoComponent} from './tree-demo/tree-demo.component';
 
 const routes: Routes = [
     {
@@ -31,6 +32,10 @@ const routes: Routes = [
   {
     path: "drag-drop-example",
     component: DragDropComponent
+  },
+  {
+    path: "tree-demo",
+    component: TreeDemoComponent
   },
     {
         path: "**",

src/app/app.module.ts

@@ -43,6 +43,8 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {DragDropComponent} from './drag-drop/drag-drop.component';
 
 import {MatGridListModule} from '@angular/material/grid-list';
+import {TreeDemoComponent} from './tree-demo/tree-demo.component';
+import {MatTreeModule} from '@angular/material/tree';
 
 @NgModule({
     declarations: [
@@ -55,7 +57,8 @@ import {MatGridListModule} from '@angular/material/grid-list';
         CreateCourseComponent,
         CreateCourseStep1Component,
         CreateCourseStep2Component,
-        DragDropComponent
+        DragDropComponent,
+        TreeDemoComponent
     ],
     imports: [
         BrowserModule,
@@ -86,7 +89,8 @@ import {MatGridListModule} from '@angular/material/grid-list';
         MatDatepickerModule,
         MatNativeDateModule,
         ReactiveFormsModule,
-        MatGridListModule
+        MatGridListModule,
+        MatTreeModule
     ],
     providers: [
         CoursesService,

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

@@ -0,0 +1,8 @@
+
+<div class="tree-demo-container">
+
+  <h3>Nested Tree Demo</h3>
+
+  <h3>Flat Tree Demo</h3>
+
+</div>

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

@@ -0,0 +1,43 @@
+
+
+.tree-demo-container {
+  font-family: "Roboto";
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 30px;
+}
+
+.leaf-node {
+  padding-left: 30px;
+}
+
+
+
+
+.example-tree-invisible {
+  display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+}
+
+/*
+ * This padding sets alignment of the nested nodes.
+ */
+.example-tree .mat-nested-tree-node div[role=group] {
+  padding-left: 40px;
+}
+
+/*
+ * Padding for leaf nodes.
+ * 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 {
+  padding-left: 40px;
+}

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

@@ -0,0 +1,68 @@
+import {Component, OnInit} from '@angular/core';
+import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeNestedDataSource} from '@angular/material/tree';
+import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree';
+
+interface CourseNode {
+  name: string;
+  children?: CourseNode[];
+}
+
+const TREE_DATA: CourseNode[] = [
+  {
+    name: 'Angular For Beginners',
+    children: [
+      {
+        name: 'Introduction to Angular'
+      },
+      {
+        name: 'Angular Component @Input()'
+      },
+      {
+        name: 'Angular Component @Output()'
+      }
+    ],
+  },
+  {
+    name: 'Angular Material In Depth',
+    children: [
+      {
+        name: 'Introduction to Angular Material',
+        children: [
+          {
+            name: 'Form Components'
+          },
+          {
+            name: 'Navigation and Containers'
+          }
+        ],
+      },
+      {
+        name: 'Advanced Angular Material',
+        children: [
+          {
+            name: 'Custom Themes'
+          },
+          {
+            name: 'Tree Components'
+          }
+        ],
+      },
+    ],
+  },
+];
+
+@Component({
+  selector: 'tree-demo',
+  templateUrl: 'tree-demo.component.html',
+  styleUrls: ['tree-demo.component.scss']
+})
+export class TreeDemoComponent implements OnInit {
+
+  ngOnInit() {
+
+
+  }
+
+}
+
+