@anguless/angulux/toast

toast

2 declarations3 demos

import

import { ToastModule } from '@anguless/angulux/toast';

Basic

Toast renders whatever MessageService is told to add. The service is provided by the component that owns the toast.

<agl-toast /><agl-button label="Show" (onClick)="show()" />

Severity

Severity decides the colour and icon of the message.

<agl-toast /><agl-button label="Success" severity="success" (onClick)="show('success', 'Success', 'Message sent')" /><agl-button label="Info" severity="info" (onClick)="show('info', 'Info', 'Message content')" /><agl-button label="Warn" severity="warn" (onClick)="show('warn', 'Warning', 'Check the form')" /><agl-button label="Error" severity="danger" (onClick)="show('error', 'Error', 'Something failed')" />

Position

Several toasts can coexist when each has its own key, and messages are routed by that key.

<agl-toast position="top-left" key="tl" /><agl-toast position="bottom-center" key="bc" /><agl-button label="Top left" (onClick)="show('tl')" /><agl-button label="Bottom center" (onClick)="show('bc')" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

ToastItem

componentagl-toastItem

Input	Type	Default
message	ToastMessageOptions \| null \| undefined	not documented
index	number \| null \| undefined	not documented
life	number	not documented
template	TemplateRef<ToastMessageTemplateContext> \| undefined	not documented
headlessTemplate	TemplateRef<ToastHeadlessTemplateContext> \| undefined	not documented
showTransformOptions	string \| undefined	not documented
hideTransformOptions	string \| undefined	not documented
showTransitionOptions	string \| undefined	not documented
hideTransitionOptions	string \| undefined	not documented
motionOptions	MotionOptions	not documented
clearAll	any	not documented

Output	Type	Description
onAnimationStart	HTMLElement
onAnimationEnd	HTMLElement
onClose	EventEmitter<ToastItemCloseEvent>

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

Toast

componentagl-toast

Toast is used to display messages in an overlay.

Input	Type	Default	Description
key	string \| undefined	not documented	Key of the message in case message is targeted to a specific toast component.
autoZIndex	boolean	not documented	Whether to automatically manage layering.
baseZIndex	number	not documented	Base zIndex value to use in layering.
life	number	not documented	The default time to display messages for in milliseconds.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Inline class of the component.
position	ToastPositionType	not documented	Position of the toast in viewport.
preventOpenDuplicates	boolean	not documented	It does not add the new message if there is already a toast displayed with the same content
preventDuplicates	boolean	not documented	Displays only once a message with the same content.
showTransformOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transform options of the show animation.
hideTransformOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transform options of the hide animation.
showTransitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transition options of the show animation.
hideTransitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transition options of the hide animation.
motionOptions	MotionOptions \| undefined	not documented	The motion options.
breakpoints	{ [key: string]: any } \| undefined	not documented	Object literal to define styles per screen size.

Output	Type	Description
onClose	EventEmitter<ToastCloseEvent>	Callback to invoke when a message is closed.

Template slot	Description
<ng-template #message>	Custom message template.
<ng-template #headless>	Custom headless template.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.