Toasts are transient, dismissible notifications. A ToastQueue from @mintplayer/ui-core/toast holds them: push(data) queues one and close(id) dismisses it. <bs-toaster [queue]> renders the queue in a fixed corner, with its bsToasterToast template once per entry; compose <bs-toast> with <bs-toast-header> and <bs-toast-body> there. A toast announces its text when it shows, and hides itself after five seconds unless the pointer or focus is on the toasts.
<button type="button" [color]="colors.primary" (click)="toasts.push('Saved!')">
Show toast
</button>
<bs-toaster [queue]="toasts">
<ng-container *bsToasterToast="let toast">
<bs-toast [visible]="toast.visible" (visibleChange)="toasts.close(toast.id)">
<bs-toast-header>
<strong class="me-auto">Notification</strong>
</bs-toast-header>
<bs-toast-body>{{ toast.data }}</bs-toast-body>
</bs-toast>
</ng-container>
</bs-toaster>
import { Component, DestroyRef, inject } from '@angular/core';
import { Color } from '@mintplayer/ng-bootstrap';
import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
import {
BsToastBodyComponent,
BsToastComponent,
BsToasterComponent,
BsToasterToastDirective,
BsToastHeaderComponent,
} from '@mintplayer/ng-bootstrap/toast';
import { ToastQueue } from '@mintplayer/ui-core/toast';
@Component({
selector: 'my-toast-demo',
templateUrl: './my-toast-demo.component.html',
imports: [
BsToasterComponent,
BsToasterToastDirective,
BsToastComponent,
BsToastHeaderComponent,
BsToastBodyComponent,
BsButtonTypeDirective,
],
})
export class MyToastDemoComponent {
protected readonly colors = Color;
// Provide it from a service to toast from anywhere in the app.
readonly toasts = new ToastQueue<string>();
constructor() {
inject(DestroyRef).onDestroy(() => this.toasts.destroy());
}
}