@anguless/angulux/message
message
1 declarations4 demos
import
import { MessageModule } from '@anguless/angulux/message';Basic
A message renders whatever is projected into it.
Message Content
<agl-message>Message Content</agl-message>Severity
Severity decides the colour and the default icon.
Success Message
Info Message
Warn Message
Error Message
Secondary Message
Contrast Message
<div style="width: 100%; display: grid; gap: 0.5rem"> <agl-message severity="success">Success Message</agl-message> <agl-message severity="info">Info Message</agl-message> <agl-message severity="warn">Warn Message</agl-message> <agl-message severity="error">Error Message</agl-message> <agl-message severity="secondary">Secondary Message</agl-message> <agl-message severity="contrast">Contrast Message</agl-message></div>Icon
The icon property replaces the one severity would have chosen.
Message Content
<agl-message severity="info" icon="pi pi-send">Message Content</agl-message>Closable
A closable message gains a control that dismisses it.
Closable Message
<agl-message [closable]="true">Closable Message</agl-message>API
Generated from the committed corpus, which check:corpus holds to the built library.
Message
componentagl-messageMessage groups a collection of contents in tabs.
| Input | Type | Default | Description |
|---|---|---|---|
| severity | 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined | null | 'info' | Severity level of the message. |
| text deprecated — since v20.0.0. Use content projection instead '<agl-message>Content</agl-message>'. | string | undefined | not documented | Text content. |
| escape deprecated — since v20.0.0. Use content projection instead '<agl-message>Content</agl-message>'. | boolean | not documented | Whether displaying messages would be escaped or not. |
| style | { [klass: string]: any } | null | undefined | not documented | Inline style of the component. |
| styleClass | string | undefined | not documented | Style class of the component. |
| closable | boolean | false | Whether the message can be closed manually using the close icon. |
| icon | string | undefined | undefined | Icon to display in the message. |
| closeIcon | string | undefined | undefined | Icon to display in the message close button. |
| life | number | undefined | undefined | Delay in milliseconds to close the message automatically. |
| showTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead. | string | '300ms ease-out' | Transition options of the show animation. |
| hideTransitionOptions deprecated — since v21.0.0, use `motionOptions` instead. | string | '200ms cubic-bezier(0.86, 0, 0.07, 1)' | Transition options of the hide animation. |
| size | 'large' | 'small' | undefined | not documented | Defines the size of the component. |
| variant | 'outlined' | 'text' | 'simple' | undefined | not documented | Specifies the input variant of the component. |
| motionOptions | MotionOptions | undefined | not documented | The motion options. |
| Output | Type | Description |
|---|---|---|
| onClose | EventEmitter<{ originalEvent: Event }> | Emits when the message is closed. |
| Template slot | Description |
|---|---|
| <ng-template #container> | Custom template of the message container. |
| <ng-template #icon> | Custom template of the message icon. |
| <ng-template #closeicon> | Custom template of the close icon. |
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. |