Reactive Angular Course

Author: Your Name

server/get-courses.route.ts

@@ -7,17 +7,21 @@ import {COURSES} from "./db-data";
 
 export function getAllCourses(req: Request, res: Response) {
 
-/*
+
     console.log("ERROR loading courses!");
-    res.status(500).json({message: 'random error occurred.'});
+    res.status(500).json({message: 'error occurred.'});
     return;
- */
 
+
+
+/*
         setTimeout(() => {
 
              res.status(200).json({payload:Object.values(COURSES)});
 
         }, 1500);
+
+ */
 }
 
 

src/app/messages/messages.component.html

@@ -1,9 +1,16 @@
-<div class="messages-container" *ngIf="showMessages">
 
-    <div class="message" *ngFor="let error of errors">
-        {{error}}
+<ng-container *ngIf="(errors$ | async) as errors">
+
+    <div class="messages-container" *ngIf="showMessages">
+
+        <div class="message" *ngFor="let error of errors">
+            {{error}}
+        </div>
+
+        <mat-icon class="close" (click)="onClose()">close</mat-icon>
+
     </div>
 
-    <mat-icon class="close" (click)="onClose()">close</mat-icon>
+</ng-container>
+
 
-</div>

src/app/messages/messages.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {Observable} from 'rxjs';
 import {Message} from '../model/message';
 import {tap} from 'rxjs/operators';
+import {MessagesService} from './messages.service';
 
 @Component({
   selector: 'messages',
@@ -12,13 +13,20 @@ export class MessagesComponent implements OnInit {
 
   showMessages = false;
 
+  errors$: Observable<string[]>;
 
-  constructor() {
+
+  constructor(public messagesService: MessagesService) {
+
+      console.log("Created messages component");
 
   }
 
   ngOnInit() {
-
+      this.errors$ = this.messagesService.errors$
+          .pipe(
+              tap(() => this.showMessages = true)
+          );
 
   }
 

src/app/messages/messages.service.ts

@@ -1,12 +1,20 @@
 import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {filter} from 'rxjs/operators';
 
 
 @Injectable()
 export class MessagesService {
 
+    private subject = new BehaviorSubject<string[]>([]);
 
-    showErrors(...errors: string[]) {
+    errors$: Observable<string[]> = this.subject.asObservable()
+        .pipe(
+            filter(messages => messages && messages.length > 0)
+        );
 
+    showErrors(...errors: string[]) {
+        this.subject.next(errors);
     }
 
 }