diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7dd570e..caeea25 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 776287c..42eed63 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+import {ToastContainerComponent} from '../components/toast-container/toast-container/toast-container.component';
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ imports: [RouterOutlet, ToastContainerComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
diff --git a/src/components/toast-container/toast-container/toast-container.component.css b/src/components/toast-container/toast-container/toast-container.component.css
new file mode 100644
index 0000000..4d1c95f
--- /dev/null
+++ b/src/components/toast-container/toast-container/toast-container.component.css
@@ -0,0 +1,7 @@
+:host {
+ position: fixed;
+ top: 0;
+ right: 0;
+ margin: 0.5em;
+ z-index: 1200;
+}
diff --git a/src/components/toast-container/toast-container/toast-container.component.html b/src/components/toast-container/toast-container/toast-container.component.html
new file mode 100644
index 0000000..35b3224
--- /dev/null
+++ b/src/components/toast-container/toast-container/toast-container.component.html
@@ -0,0 +1,7 @@
+@for (toast of toastService.toasts; track toast) {
+ {{ toast.body }}
+}
diff --git a/src/components/toast-container/toast-container/toast-container.component.spec.ts b/src/components/toast-container/toast-container/toast-container.component.spec.ts
new file mode 100644
index 0000000..d052b36
--- /dev/null
+++ b/src/components/toast-container/toast-container/toast-container.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastContainerComponent } from './toast-container.component';
+
+describe('ToastContainerComponent', () => {
+ let component: ToastContainerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ToastContainerComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ToastContainerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/components/toast-container/toast-container/toast-container.component.ts b/src/components/toast-container/toast-container/toast-container.component.ts
new file mode 100644
index 0000000..c1eac7a
--- /dev/null
+++ b/src/components/toast-container/toast-container/toast-container.component.ts
@@ -0,0 +1,15 @@
+import {Component, inject} from '@angular/core';
+import {ToastService} from '../../../services/toast/toast.service';
+import {NgbToast} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+ selector: 'app-toast-container',
+ imports: [
+ NgbToast
+ ],
+ templateUrl: './toast-container.component.html',
+ styleUrl: './toast-container.component.css'
+})
+export class ToastContainerComponent {
+ toastService: ToastService = inject(ToastService);
+}
diff --git a/src/interfaces/toast.ts b/src/interfaces/toast.ts
new file mode 100644
index 0000000..cb029c4
--- /dev/null
+++ b/src/interfaces/toast.ts
@@ -0,0 +1,6 @@
+export interface Toast {
+ header?: string;
+ body: string;
+ delay?: number;
+ htmlClass?: string;
+}
diff --git a/src/services/toast/toast.service.spec.ts b/src/services/toast/toast.service.spec.ts
new file mode 100644
index 0000000..e0413db
--- /dev/null
+++ b/src/services/toast/toast.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ToastService } from './toast.service';
+
+describe('ToastService', () => {
+ let service: ToastService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ToastService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/services/toast/toast.service.ts b/src/services/toast/toast.service.ts
new file mode 100644
index 0000000..d760383
--- /dev/null
+++ b/src/services/toast/toast.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import {Toast} from '../../interfaces/toast';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ToastService {
+ toasts: Toast[] = [];
+
+ show(toast: Toast) {
+ this.toasts.push(toast);
+ }
+
+ remove(toast: Toast) {
+ this.toasts = this.toasts.filter(t => t != toast);
+ }
+}