Angular Material In Depth

Author: Your Name

src/app/course/course.component.html

@@ -1,52 +1,57 @@
 <div class="course">
 
-  <h2>{{course?.description}}</h2>
+    <h2>{{course?.description}}</h2>
 
-  <img class="course-thumbnail" [src]="course?.iconUrl">
+    <img class="course-thumbnail" [src]="course?.iconUrl">
 
-  <div class="spinner-container" *ngIf="loading">
+    <div class="spinner-container" *ngIf="loading">
 
-      <mat-spinner></mat-spinner>
+        <mat-spinner></mat-spinner>
 
-  </div>
+    </div>
 
-</div>
+    <table mat-table class="lessons-table mat-elevation-z8"
+           [dataSource]="lessons">
 
-<table mat-table class="lessons-table mat-elevation-z8"
-       [dataSource]="lessons">
+        <ng-container matColumnDef="seqNo">
 
-    <ng-container matColumnDef="seqNo">
+            <th mat-header-cell *matHeaderCellDef>#</th>
 
-        <th mat-header-cell *matHeaderCellDef>#</th>
+            <td mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</td>
 
-        <td mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</td>
+        </ng-container>
 
-    </ng-container>
+        <ng-container matColumnDef="description">
 
-    <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef>Description</th>
 
-        <th mat-header-cell *matHeaderCellDef>Description</th>
+            <td mat-cell *matCellDef="let lesson">{{lesson.description}}</td>
 
-        <td mat-cell *matCellDef="let lesson">{{lesson.description}}</td>
+        </ng-container>
 
-    </ng-container>
+        <ng-container matColumnDef="duration">
 
-    <ng-container matColumnDef="duration">
+            <th mat-header-cell *matHeaderCellDef>Duration</th>
 
-        <th mat-header-cell *matHeaderCellDef>Duration</th>
+            <td class="duration-cell" mat-cell *matCellDef="let lesson">{{lesson.duration}}</td>
 
-        <td class="duration-cell" mat-cell *matCellDef="let lesson">{{lesson.duration}}</td>
+        </ng-container>
 
-    </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let lesson;columns:displayedColumns"></tr>
 
-    <tr mat-row *matRowDef="let lesson;columns:displayedColumns"></tr>
 
+    </table>
 
-</table>
+    <mat-paginator class="mat-elevation-z8"
+                   [length]="course?.lessonsCount"
+                   [pageSize]="3"
+                   [pageSizeOptions]="[3, 5, 10]">
 
+    </mat-paginator>
 
+</div>
 
 
 

src/app/course/course.component.scss

@@ -1,7 +1,7 @@
 
 .course {
     text-align: center;
-    max-width: 390px;
+    width: 390px;
     margin: 0 auto;
 }
 
@@ -35,7 +35,7 @@
 .lessons-table {
   min-height: 360px;
   margin-top: 10px;
-  max-width: 400px;
+  width: 400px;
   margin-left: auto;
   margin-right: auto;
   tr:hover {
@@ -44,13 +44,15 @@
   }
 }
 
+mat-paginator {
+  width: 400px;
+  margin-bottom: 200px;
+}
 
 .spinner-container mat-spinner {
     margin: 130px auto 0 auto;
 }
 
-
-
 .mat-column-seqNo {
   width: 32px;
   border-right: 1px solid black;

src/app/course/course.component.ts

@@ -23,6 +23,9 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     loading = false;
 
+    @ViewChild(MatPaginator)
+    paginator: MatPaginator;
+
     constructor(private route: ActivatedRoute,
                 private coursesService: CoursesService) {
 
@@ -42,7 +45,11 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
         this.loading = true;
 
-        this.coursesService.findLessons(this.course.id, "asc", 0, 3)
+        this.coursesService.findLessons(
+            this.course.id,
+            "asc",
+            this.paginator?.pageIndex ?? 0,
+            this.paginator?.pageSize ?? 3)
             .pipe(
                 tap(lessons => this.lessons = lessons),
                 catchError(err => {
@@ -59,7 +66,20 @@ export class CourseComponent implements OnInit, AfterViewInit {
 
     ngAfterViewInit() {
 
+        this.paginator.page
+            .pipe(
+                tap(() => this.loadLessonsPage())
+            )
+            .subscribe();
+
 
     }
 
 }
+
+
+
+
+
+
+