Angular Material In Depth

Author: Your Name

src/app/course/course.component.html

@@ -14,6 +14,33 @@ <h2>{{course?.description}}</h2>
            matSort matSortDisableClear matSortActive="seqNo" matSortDirection="asc"
            [dataSource]="lessons" multiTemplateDataRows>
 
+        <ng-container matColumnDef="select">
+
+            <th mat-header-cell *matHeaderCellDef>
+
+                <mat-checkbox [checked]="selection.hasValue() && isAllSelected()"
+                              [indeterminate]="selection.hasValue() && !isAllSelected()"
+
+                    (change)="toggleAll()">
+
+
+                </mat-checkbox>
+
+
+            </th>
+
+            <td  mat-cell *matCellDef="let lesson" (click)="$event.stopPropagation()">
+
+                <mat-checkbox (change)="onLessonToggled(lesson)"
+                    [checked]="selection.isSelected(lesson)">
+
+                </mat-checkbox>
+
+
+            </td>
+
+        </ng-container>
+
         <ng-container matColumnDef="seqNo">
 
             <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
@@ -40,7 +67,7 @@ <h2>{{course?.description}}</h2>
 
         <ng-container matColumnDef="expandedDetail">
 
-            <td mat-cell *matCellDef="let lesson" colspan="3">
+            <td mat-cell *matCellDef="let lesson" colspan="4">
                 {{lesson.longDescription}}
             </td>
 

src/app/course/course.component.ts

@@ -8,6 +8,7 @@ import {CoursesService} from "../services/courses.service";
 import {debounceTime, distinctUntilChanged, startWith, tap, delay, catchError, finalize} from 'rxjs/operators';
 import {merge, fromEvent, throwError} from 'rxjs';
 import {Lesson} from '../model/lesson';
+import {SelectionModel} from '@angular/cdk/collections';
 
 
 @Component({
@@ -29,12 +30,15 @@ export class CourseComponent implements OnInit, AfterViewInit {
     @ViewChild(MatSort)
     sort: MatSort;
 
+    selection = new SelectionModel<Lesson>(true, []);
+
+
     constructor(private route: ActivatedRoute,
                 private coursesService: CoursesService) {
 
     }
 
-    displayedColumns = ['seqNo', "description", "duration"];
+    displayedColumns = ['select', 'seqNo', "description", "duration"];
 
     expandedLesson: Lesson = null;
 
@@ -46,6 +50,14 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     }
 
+    onLessonToggled(lesson:Lesson) {
+
+        this.selection.toggle(lesson);
+
+        console.log(this.selection.selected);
+
+    }
+
     loadLessonsPage() {
 
         this.loading = true;
@@ -93,6 +105,19 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     }
 
+    isAllSelected() {
+        return this.selection.selected?.length == this.lessons?.length;
+    }
+
+    toggleAll() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        }
+        else {
+            this.selection.select(...this.lessons);
+        }
+    }
+
 }