Angular Material In Depth

Author: Your Name

src/app/courses-card-list/courses-card-list.component.css

@@ -20,3 +20,18 @@
   max-width: 442px;
 }
 
+.handset-portrait .course-card {
+    width: 100%;
+    margin: 0;
+    padding: 16px 0;
+}
+
+.handset-portrait .course-thumbnail {
+    width: 100%;
+    margin: 0;
+}
+
+.handset-portrait .long-description {
+    padding:  10px 10px 0 10px;
+}
+

src/app/courses-card-list/courses-card-list.component.html

@@ -1,6 +1,7 @@
 
 
-<mat-grid-list [cols]="2" [rowHeight]="'500px'">
+<mat-grid-list [cols]="cols" [rowHeight]="rowHeight"
+               [ngClass]="{'handset-portrait': handsetPortrait}">
 
     <mat-grid-tile *ngFor="let course of courses">
 

src/app/courses-card-list/courses-card-list.component.ts

@@ -1,8 +1,9 @@
 import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
-import {Course} from "../model/course";
-import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
+import {Course} from '../model/course';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {openEditCourseDialog} from '../course-dialog/course-dialog.component';
 import {filter} from 'rxjs/operators';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 
 @Component({
     selector: 'courses-card-list',
@@ -14,21 +15,60 @@ export class CoursesCardListComponent implements OnInit {
     @Input()
     courses: Course[];
 
-    constructor(private dialog: MatDialog) {
+    cols = 3;
+
+    rowHeight = '500px';
+
+    handsetPortrait = false;
+
+
+    constructor(private dialog: MatDialog,
+                private responsive: BreakpointObserver) {
     }
 
     ngOnInit() {
 
+        this.responsive.observe([
+            Breakpoints.TabletPortrait,
+            Breakpoints.TabletLandscape,
+            Breakpoints.HandsetPortrait,
+            Breakpoints.HandsetLandscape
+        ])
+            .subscribe(result => {
+
+                this.cols = 3;
+                this.rowHeight = "500px";
+                this.handsetPortrait = false;
+
+                const breakpoints = result.breakpoints;
+
+                if (breakpoints[Breakpoints.TabletPortrait]) {
+                    this.cols = 1;
+                }
+                else if (breakpoints[Breakpoints.HandsetPortrait]) {
+                    this.cols = 1;
+                    this.rowHeight = "430px";
+                    this.handsetPortrait = true;
+                }
+                else if (breakpoints[Breakpoints.HandsetLandscape]) {
+                    this.cols = 1;
+                }
+                else if (breakpoints[Breakpoints.TabletLandscape]) {
+                    this.cols = 2;
+                }
+
+            });
+
     }
 
-    editCourse(course:Course) {
+    editCourse(course: Course) {
 
         openEditCourseDialog(this.dialog, course)
             .pipe(
                 filter(val => !!val)
             )
             .subscribe(
-                val => console.log("new course value:", val)
+                val => console.log('new course value:', val)
             );