Add MatDialog and use messageService to display errors

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatDialogModule } from '@angular/material/dialog';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { httpInterceptorProviders } from './http-interceptors';
@@ -56,6 +57,7 @@ import { DialogComponent } from './dialog/dialog.component';
     MatButtonToggleModule,
     MatCardModule,
     MatProgressBarModule,
+    MatDialogModule,
     FlexLayoutModule,
     HttpClientModule,
     HttpClientXsrfModule.withOptions({

src/app/dashboard/dashboard.component.ts

@@ -11,6 +11,9 @@ import { StType } from '../type';
 import { FilterService } from '../services/filter.service';
 import { ProgressService } from '../services/progress.service';
 import { MatProgressBar } from '@angular/material/progress-bar';
+import { MessageService } from '../services/message.service';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { DialogComponent } from '../dialog/dialog.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -56,11 +59,14 @@ export class DashboardComponent implements OnInit, AfterViewInit {
   deviceChart: StType = StType.Device;
   progressValue: number = 0;
   isLoading = true;
+  private dialogRef: MatDialogRef<DialogComponent>;
 
 
   constructor(
     private systemConfigService: SystemConfigService,
     private progressService: ProgressService,
+    private messageService: MessageService,
+    public dialog: MatDialog
   ) { }
 
   ngOnInit() {
@@ -85,5 +91,20 @@ export class DashboardComponent implements OnInit, AfterViewInit {
       this.progressValue = this.progressService.percentValue;
     }, 100);
 
+    // Listen for messages from other services/components
+    this.messageService.messageAdded$
+      .subscribe(
+        _ => {
+          // Open dialog
+          if (!this.dialogRef)
+            this.dialogRef = this.dialog.open(DialogComponent);
+
+          this.dialogRef.afterClosed().subscribe(
+            _ => {
+              this.dialogRef = null;
+              this.messageService.clear();
+            }
+          );
+        });
   }
 }

src/app/dialog/dialog.component.html

@@ -1,3 +1,6 @@
 <h1 mat-dialog-title>Error</h1>
 <div mat-dialog-content>
+    <ul>
+        <li *ngFor='let message of messageService.messages'> {{message}} </li>
+    </ul>
 </div>

src/app/dialog/dialog.component.ts

@@ -15,7 +15,5 @@ export class DialogComponent implements OnInit {
 
   constructor(public messageService: MessageService) { }
 
-  ngOnInit(): void {
+  ngOnInit(): void { }
-  }
-
 }

src/app/http-interceptors/error.interceptor.ts

@@ -9,11 +9,12 @@ import {
 import { Observable, throwError } from 'rxjs';
 import { apiRetry } from '../api-utils';
 import { retry, catchError } from 'rxjs/operators';
+import { MessageService } from '../services/message.service';
 
 @Injectable()
 export class ErrorInterceptor implements HttpInterceptor {
 
-  constructor() { }
+  constructor(private messageService: MessageService) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     return next.handle(request)
@@ -29,6 +30,8 @@ export class ErrorInterceptor implements HttpInterceptor {
             errorMsg = `Error Status: ${error.status}\nMessage: ${error.message}`;
           }
           console.log(errorMsg);
+
+          this.messageService.add(errorMsg);
           return throwError(errorMsg);
         })
       )

src/app/services/message.service.ts

@@ -1,11 +1,17 @@
 import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class MessageService {
   messages: string[] = [];
+  private messageAddedSource = new Subject<string>();
+  messageAdded$ = this.messageAddedSource.asObservable();
 
   add(message: string) {
     this.messages.push(message);
+    this.messageAddedSource.next(message);
   }
 
   clear() {