Angular Material Course

Author: jhades

src/app/app.module.ts

@@ -17,7 +17,7 @@ import {MatListModule} from '@angular/material/list';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import { CourseComponent } from './course/course.component';
 import {MatTableModule} from '@angular/material/table';
-import {MatInputModule} from "@angular/material";
+import {MatInputModule, MatSortModule} from "@angular/material";
 import {MatPaginatorModule} from '@angular/material/paginator';
 
 
@@ -43,7 +43,8 @@ import {MatPaginatorModule} from '@angular/material/paginator';
         MatToolbarModule,
         MatTableModule,
         MatInputModule,
-        MatPaginatorModule
+        MatPaginatorModule,
+        MatSortModule
     ],
     providers: [],
     bootstrap: [AppComponent]

src/app/course/course.component.html

@@ -11,16 +11,28 @@ <h2>{{course?.description}}</h2>
 
     </mat-input-container>
 
-    <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
+    <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource" matSort>
+
+        <ng-container matColumnDef="seqNo">
+
+            <mat-header-cell *matHeaderCellDef mat-sort-header>
+                #
+            </mat-header-cell>
+
+            <mat-cell *matCellDef="let lesson" class="description-cell">
+                {{lesson.seqNo}}
+            </mat-cell>
+
+        </ng-container>
 
         <ng-container matColumnDef="description">
 
-            <mat-header-cell *matHeaderCellDef>
+            <mat-header-cell *matHeaderCellDef mat-sort-header>
                 Description
             </mat-header-cell>
 
-            <mat-cell *matCellDef="let course" class="description-cell">
-                {{course.description}}
+            <mat-cell *matCellDef="let lesson" class="description-cell">
+                {{lesson.description}}
             </mat-cell>
 
         </ng-container>
@@ -31,8 +43,8 @@ <h2>{{course?.description}}</h2>
                 Duration
             </mat-header-cell>
 
-            <mat-cell *matCellDef="let course" class="duration-cell">
-                {{course.duration}}
+            <mat-cell *matCellDef="let lesson" class="duration-cell">
+                {{lesson.duration}}
                 <mat-icon>access_time</mat-icon>
             </mat-cell>
 

src/app/course/course.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
-import {MatPaginator, MatTableDataSource} from "@angular/material";
+import {MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
 import {Lesson} from "../model/lesson";
 import {findCourseById, findLessonsForCourse} from "../model/db-data";
 import {Course} from "../model/course";
@@ -15,12 +15,14 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     course:Course;
 
-    displayedColumns = ["description", "duration"];
+    displayedColumns = ["seqNo", "description", "duration"];
 
     dataSource = new MatTableDataSource<Lesson>();
 
     @ViewChild(MatPaginator) paginator: MatPaginator;
 
+    @ViewChild(MatSort) sort: MatSort;
+
     constructor(private route: ActivatedRoute) {
 
     }
@@ -41,6 +43,7 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     ngAfterViewInit() {
         this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
     }
 
     searchLesson(search:string) {