observables, async pipe

src/app/home/home.component.html

@@ -7,7 +7,7 @@ <h3>All Courses</h3>
 
         <mat-tab label="Beginners">
 
-          <mat-card *ngFor="let course of beginnerCourses" class="course-card mat-elevation-z10">
+          <mat-card *ngFor="let course of beginnerCourses$ | async" class="course-card mat-elevation-z10">
 
             <mat-card-header>
 
@@ -40,7 +40,7 @@ <h3>All Courses</h3>
 
         <mat-tab label="Advanced">
 
-          <mat-card *ngFor="let course of advancedCourses" class="course-card mat-elevation-z10">
+          <mat-card *ngFor="let course of advancedCourses$ | async" class="course-card mat-elevation-z10">
 
             <mat-card-header>
 

src/app/home/home.component.ts

@@ -1,10 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {Course, sortCoursesBySeqNo} from '../model/course';
-import {interval, noop, Observable, of, throwError, timer} from 'rxjs';
-import {catchError, delay, delayWhen, filter, finalize, map, retryWhen, shareReplay, tap} from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import {HttpClient} from '@angular/common/http';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
+import { CoursesService } from '../services/courses.service';
 
 
 @Component({
@@ -14,35 +15,32 @@ import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
 })
 export class HomeComponent implements OnInit {
 
-  beginnerCourses: Course[];
+  beginnerCourses$: Observable<Course[]>;
+  advancedCourses$: Observable<Course[]>;
 
-  advancedCourses: Course[];
-
-
-  constructor(private http: HttpClient, private dialog: MatDialog) {
-
-  }
+  constructor(private http: HttpClient, private dialog: MatDialog, private coursesService: CoursesService) {}
 
   ngOnInit() {
-
-    this.http.get('/api/courses')
-      .subscribe(
-        res => {
-
-          const courses: Course[] = res["payload"].sort(sortCoursesBySeqNo);
-
-          this.beginnerCourses = courses.filter(course => course.category == "BEGINNER");
-
-          this.advancedCourses = courses.filter(course => course.category == "ADVANCED");
-
-        });
-
+    const courses$ = this.coursesService.loadAllCourses()
+      .pipe(
+        map(courses => courses.sort(sortCoursesBySeqNo))
+      )
+
+    this.beginnerCourses$ = courses$
+      .pipe(
+        map(courses => courses.filter(course => course.category === "BEGINNER"))
+      )
+
+    this.advancedCourses$ = courses$
+      .pipe(
+        map(courses => courses.filter(course => course.category === "ADVANCED"))
+      )
   }
 
   editCourse(course: Course) {
 
     const dialogConfig = new MatDialogConfig();
-
+    
     dialogConfig.disableClose = true;
     dialogConfig.autoFocus = true;
     dialogConfig.width = "400px";

src/app/services/courses.service.ts

@@ -0,0 +1,21 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { map, tap } from "rxjs/operators";
+import { Course } from "../model/course";
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class CoursesService {
+    constructor(private http: HttpClient) {}
+
+    loadAllCourses(): Observable<Course[]> {
+        return this.http.get<Course[]>("/api/courses")
+            .pipe(
+                map(res => res["payload"]),
+                tap(res => console.log(res["payload"]))
+            )
+    }
+}