Angular Material In Depth

Author: Your Name

src/app/course/course.component.html

@@ -48,7 +48,11 @@ <h2>{{course?.description}}</h2>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 
-        <tr mat-row *matRowDef="let lesson;columns:displayedColumns"></tr>
+        <tr mat-row
+            (click)="onToggleLesson(lesson)"
+            *matRowDef="let lesson;columns:displayedColumns">
+
+        </tr>
 
         <tr mat-row *matRowDef="let lesson;columns:['expandedDetail']"></tr>
 

src/app/course/course.component.ts

@@ -36,6 +36,8 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     displayedColumns = ['seqNo', "description", "duration"];
 
+    expandedLesson: Lesson = null;
+
     ngOnInit() {
 
         this.course = this.route.snapshot.data["course"];
@@ -68,6 +70,16 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     }
 
+    onToggleLesson(lesson:Lesson) {
+        if (lesson == this.expandedLesson) {
+            this.expandedLesson = null;
+        }
+        else {
+            this.expandedLesson = lesson;
+        }
+
+    }
+
     ngAfterViewInit() {
 
         this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
@@ -89,3 +101,12 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
 
 
+
+
+
+
+
+
+
+
+