Toast component

The component <day-toast> is a dynamic container for toast notifications, managing screen position, auto-close behavior, and entry/exit animations.

Import

import { DAYToastComponent } from '@dayerlin-bustamante/toast';
import { DAYToastTriggerDirective } from '@dayerlin-bustamante/toast';

Selectors

Toast: day-toast

Toast trigger directive: [DAYToast]

Installation and Usage

npm install @dayerlin-bustamante/toast

import { DAYToastComponent, DAYToastTriggerDirective } from '@dayerlin-bustamante/toast';

<day-toast #toast>Message</day-toast>
<day-icon [DAYToast]="toast" [icon]="'copy'"/>

Inputs

Not included.

Output

Not included.

Directives

Public methods

getEnterAnimationClass: returns depending on the verticalPosition 'day-slide-top-in' : 'day-slide-bottom-in';

getLeaveAnimationClass: returns depending on the verticalPosition 'day-slide-top-out' : 'day-slide-bottom-out';

Dependencies

'/core'

Example

Description

• Supports placing the toast at the top or bottom of the screen. Selects predefined animations depending on position.
• Receives parameters from DAY_TOAST_CONFIGURATION
• Implements the IDAYDialogElement interface for full compatibility with the DAY. Uses DAY_DIALOG_REF for controlled closing.
• Have a directive dayToastTrigger for easily triggering toasts from any element.