3 files changed, 47 insertions, 0 deletions
diff --git a/src/app/components/error-bar/error-bar.component.css b/src/app/components/error-bar/error-bar.component.css
new file mode 100644
index 0000000..8f8edd9
--- /dev/null
+++ b/src/app/components/error-bar/error-bar.component.css
@@ -0,0 +1,12 @@
+#error-bar {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--failure);
+  color: white;
+  padding: .2em;
+  text-align: center;
+}
+
+#error-bar:empty {
+  display: none;
+}
diff --git a/src/app/components/error-bar/error-bar.component.html b/src/app/components/error-bar/error-bar.component.html
new file mode 100644
index 0000000..f1995ab
--- /dev/null
+++ b/src/app/components/error-bar/error-bar.component.html
@@ -0,0 +1 @@
+<div id="error-bar">{{errorMsg}}</div>
diff --git a/src/app/components/error-bar/error-bar.component.ts b/src/app/components/error-bar/error-bar.component.ts
new file mode 100644
index 0000000..111bac8
--- /dev/null
+++ b/src/app/components/error-bar/error-bar.component.ts
@@ -0,0 +1,34 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { IApiError } from 'src/interfaces/api-error';
+
+@Component({
+  selector: 'app-error-bar',
+  templateUrl: './error-bar.component.html',
+  styleUrls: ['./error-bar.component.css']
+})
+export class ErrorBarComponent implements OnInit {
+  public errorMsg = '';
+
+  constructor()
+  { }
+
+  ngOnInit(): void {
+    this.hideError();
+  }
+
+  showError(error: HttpErrorResponse): void {
+    const test: IApiError = {
+      type: '',
+      title: 'Error!',
+      status: 0,
+      traceId: ''
+    };
+    Object.assign(test, error.error);
+    this.errorMsg = test.title;
+  }
+
+  hideError(): void {
+    this.errorMsg = '';
+  }
+}