Adding flashmessages module

front/app/src/app/app.component.html

@@ -7,9 +7,9 @@
         <sidenav></sidenav>
       </div>
       <div class="col py-3">
+        <flashmessages></flashmessages>
         <router-outlet></router-outlet>
       </div>
     </div>
   </div>
 </main>
-

front/app/src/app/app.module.ts

@@ -7,11 +7,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { SidenavComponent } from "./layout/sidenav/sidenav.component";
+import { FlashmessagesComponent } from "./layout/flashmessages/flashmessages.component";
+import { FlashmessagesService } from "./layout/flashmessages/flashmessages.service";
 
 @NgModule({
   declarations: [
     AppComponent,
-    SidenavComponent
+    SidenavComponent,
+    FlashmessagesComponent
   ],
   imports: [
     BrowserModule,
@@ -19,7 +22,7 @@ import { SidenavComponent } from "./layout/sidenav/sidenav.component";
     NgbModule,
     NgxBootstrapIconsModule.pick(allIcons),
   ],
-  providers: [],
+  providers: [FlashmessagesService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

front/app/src/app/layout/flashmessages/flashmessages.component.css

@@ -0,0 +1,7 @@
+:host {
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 0.5em;
+  z-index: 1200;
+}

front/app/src/app/layout/flashmessages/flashmessages.component.html

@@ -0,0 +1,5 @@
+<ngb-toast
+  *ngFor="let flashmessage of flashmessagesService.toasts"
+  [header]="flashmessage.header" [autohide]="true" [delay]="flashmessage.delay || 5000"
+  (hiddden)="flashmessagesService.remove(flashmessage)"
+>{{flashmessage.body}}</ngb-toast>

front/app/src/app/layout/flashmessages/flashmessages.component.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { FlashmessagesService } from "./flashmessages.service";
+
+@Component({
+    selector: "flashmessages",
+    templateUrl: "./flashmessages.component.html",
+    styleUrls: ["./flashmessages.component.css"]
+})
+export class FlashmessagesComponent {
+    constructor(public flashmessagesService: FlashmessagesService) {}
+}

front/app/src/app/layout/flashmessages/flashmessages.service.ts

@@ -0,0 +1,20 @@
+import {Injectable} from "@angular/core";
+
+export interface Flashmessage {
+  header: string;
+  body: string;
+  delay?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class FlashmessagesService {
+  toasts: Flashmessage[] = [];
+
+  show(header: string, body: string) {
+    this.toasts.push({ header, body });
+  }
+
+  remove(toast: Flashmessage) {
+    this.toasts = this.toasts.filter(t => t != toast);
+  }
+}