Angular Material In Depth

Author: Your Name

server/db-data.ts

@@ -1083,86 +1083,96 @@ export const LESSONS = {
     videoId: '0Qsg8fyKwO4'
   },
 
-  // Angular Material In Depth
-
-  120: {
-    id: 120,
-    'description': 'Introduction to Angular Material',
-    'duration': '4:17',
-    'seqNo': 1,
-    courseId: 11
-  },
-  121: {
-    id: 121,
-    'description': 'Navigation and Containers',
-    'duration': '6:37',
-    'seqNo': 2,
-    courseId: 11
-  },
-  122: {
-    id: 122,
-    'description': 'Data Tables',
-    'duration': '8:03',
-    'seqNo': 3,
-    courseId: 11
-  },
-  123: {
-    id: 123,
-    'description': 'Dialogs and Overlays',
-    'duration': '11:46',
-    'seqNo': 4,
-    courseId: 11
-  },
-  124: {
-    id: 124,
-    'description': 'Commonly used Form Controls',
-    'duration': '7:17',
-    'seqNo': 5,
-    courseId: 11
-  },
-  125: {
-    id: 125,
-    'description': 'Drag and Drop',
-    'duration': '8:16',
-    'seqNo': 6,
-    courseId: 11
-  },
-  126: {
-    id: 126,
-    'description': 'Responsive Design',
-    'duration': '7:28',
-    'seqNo': 7,
-    courseId: 11
-  },
-  127: {
-    id: 127,
-    'description': 'Tree Component',
-    'duration': '11:09',
-    'seqNo': 8,
-    courseId: 11
-  },
-  128: {
-    id: 128,
-    'description': 'Virtual Scrolling',
-    'duration': '3:44',
-    'seqNo': 9,
-    courseId: 11
-  },
-  129: {
-    id: 129,
-    'description': 'Custom Themes',
-    'duration': '8:55',
-    'seqNo': 10,
-    courseId: 11
-  },
-  130: {
-    id: 130,
-    'description': 'Changing Theme at Runtime',
-    'duration': '12:37',
-    'seqNo': 11,
-    courseId: 11
-  }
-
+    // Angular Material In Depth
+
+    120: {
+        id: 120,
+        'description': 'Introduction to Angular Material',
+        'duration': '4:17',
+        'seqNo': 1,
+        courseId: 11,
+        longDescription: "A quick introduction to the Angular Material library."
+    },
+    121: {
+        id: 121,
+        'description': 'Navigation and Containers',
+        'duration': '6:37',
+        'seqNo': 2,
+        courseId: 11,
+        longDescription: "Guided tour of navigation elements and container."
+    },
+    122: {
+        id: 122,
+        'description': 'Data Tables',
+        'duration': '8:03',
+        'seqNo': 3,
+        courseId: 11,
+        longDescription: "Angular Material Data Tables in detail."
+    },
+    123: {
+        id: 123,
+        'description': 'Dialogs',
+        'duration': '11:46',
+        'seqNo': 4,
+        courseId: 11,
+        longDescription: "Modal elements and how to use them."
+    },
+    124: {
+        id: 124,
+        'description': 'Commonly used Form Controls',
+        'duration': '7:17',
+        'seqNo': 5,
+        courseId: 11,
+        longDescription: "All sorts of commonly needed form controls."
+    },
+    125: {
+        id: 125,
+        'description': 'Drag and Drop',
+        'duration': '8:16',
+        'seqNo': 6,
+        courseId: 11,
+        longDescription: "How to use drag and drop."
+    },
+    126: {
+        id: 126,
+        'description': 'Responsive Design',
+        'duration': '7:28',
+        'seqNo': 7,
+        courseId: 11,
+        longDescription: "Everything about making our screens responsive."
+    },
+    127: {
+        id: 127,
+        'description': 'Tree Component',
+        'duration': '11:09',
+        'seqNo': 8,
+        courseId: 11,
+        longDescription: "All about the Angular Material Tree component."
+    },
+    128: {
+        id: 128,
+        'description': 'Virtual Scrolling',
+        'duration': '3:44',
+        'seqNo': 9,
+        courseId: 11,
+        longDescription: "How to use virtual scrolling to handle large amounts of data."
+    },
+    129: {
+        id: 129,
+        'description': 'Custom Themes',
+        'duration': '8:55',
+        'seqNo': 10,
+        courseId: 11,
+        longDescription: "How to build your own custom Angular Material theme."
+    },
+    130: {
+        id: 130,
+        'description': 'Changing Theme at Runtime',
+        'duration': '12:37',
+        'seqNo': 11,
+        courseId: 11,
+        longDescription: ""
+    }
 };
 
 

src/app/course/course.component.html

@@ -12,7 +12,7 @@ <h2>{{course?.description}}</h2>
 
     <table mat-table class="lessons-table mat-elevation-z8"
            matSort matSortDisableClear matSortActive="seqNo" matSortDirection="asc"
-           [dataSource]="lessons">
+           [dataSource]="lessons" multiTemplateDataRows>
 
         <ng-container matColumnDef="seqNo">
 
@@ -38,10 +38,20 @@ <h2>{{course?.description}}</h2>
 
         </ng-container>
 
+        <ng-container matColumnDef="expandedDetail">
+
+            <td mat-cell *matCellDef="let lesson" colspan="3">
+                {{lesson.longDescription}}
+            </td>
+
+        </ng-container>
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 
         <tr mat-row *matRowDef="let lesson;columns:displayedColumns"></tr>
 
+        <tr mat-row *matRowDef="let lesson;columns:['expandedDetail']"></tr>
+
 
     </table>