Files
shopit-front/src/app/shared/components/toast-container/toast-container.component.html

25 lines
781 B
HTML

<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
@for (toast of toasts(); track toast.id) {
<div
class="toast show align-items-center border-0 shadow-sm"
[ngClass]="getToastBgClass(toast.type)"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="d-flex p-2">
<div class="toast-body d-flex align-items-center flex-grow-1">
<i [class]="getToastIconClass(toast.type)" class="me-2 fs-5"></i>
<span>{{ toast.message }}</span>
</div>
<button
type="button"
class="btn-close btn-close-white me-2 m-auto"
aria-label="Cerrar"
(click)="dismiss(toast.id)"
></button>
</div>
</div>
}
</div>