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); + } +}