eui documentation
  1. Components
  2. EuiGrowlComponent

File

packages/components/eui-growl/eui-growl.component.ts

Description

Notification component that displays temporary or persistent messages to users. Supports multiple message types (success, info, warning, error) with automatic dismissal or sticky behavior. Messages can be positioned in different screen locations and include customizable lifecycle durations. Implements ARIA live regions for accessibility, announcing messages to screen readers. Commonly used for user feedback, system notifications, and operation status updates.

Basic growl notification

Example :
messages: EuiGrowlMessage[] = [];

showSuccess() {
  this.messages.push({
    severity: 'success',
    summary: 'Success',
    detail: 'Operation completed'
  });
}
Example :
<eui-growl [value]="messages" position="top-right"></eui-growl>

Sticky notification

Example :
this.messages.push({
  severity: 'info',
  summary: 'Info',
  detail: 'This message stays until dismissed',
  sticky: true
});

Accessibility

  • Uses ARIA live regions (aria-live="polite") for screen reader announcements
  • Messages are announced without interrupting user workflow
  • Close buttons are keyboard accessible

Notes

  • Position options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
  • Non-sticky messages auto-dismiss after life milliseconds (default: 3000)
  • Use closeAllSticky to show a clear-all button for multiple sticky messages

Implements

DoCheck OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector eui-growl
imports NgClass TranslateModule EUI_ICON EUI_ICON_BUTTON EUI_ICON_STATE
templateUrl ./eui-growl.component.html
styleUrl ./eui-growl.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Constructor

constructor()

Inputs

ariaLive
Type : "off" | "polite" | "assertive"
Default value : 'polite'

ARIA live region politeness level controlling how screen readers announce messages. 'polite' waits for user to finish current activity, 'assertive' interrupts immediately, 'off' disables announcements.
callback
Type : function
Default value : null

Optional callback function executed when a growl message is clicked. Allows custom behavior to be triggered on user interaction with notifications.
closeAllSticky
Type : boolean
Default value : false

Enables display of a close-all button when multiple sticky messages are present. Provides users with a quick way to dismiss all persistent notifications at once.
e2eAttr
Type : string
Default value : 'eui-growl'

Data attribute used for end-to-end testing identification.
life
Type : number
Default value : 3000

Duration in milliseconds before non-sticky messages automatically dismiss. Individual messages can override this with their own life property.
position
Type : string

Screen position where growl messages appear. Common values include 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'. Affects the CSS positioning of the notification container.
sticky
Type : boolean
Default value : false

Prevents automatic dismissal of messages, requiring manual user interaction to close. When true, messages remain visible until explicitly closed by the user.
value
Type : EuiGrowlMessage[]
Default value : []

Array of message objects to display in the growl notification area. Each message should conform to the EuiGrowlMessage interface with properties like severity, summary, and detail. Messages are automatically managed with lifecycle timeouts based on sticky and life properties.

Outputs

growlClick
Type : EventEmitter<void>

Emitted when a growl message is clicked by the user. No payload is provided. Triggers in addition to the callback function if one is defined.
growlClose
Type : EventEmitter<void>

Emitted when a growl message is closed, either automatically or by user action. No payload is provided. Useful for tracking message dismissals or triggering cleanup operations.

HostBindings

attr.aria-describedby
Type : string
attr.aria-labelledby
Type : string
attr.role
Type : string
Default value : 'status'
class
Type : string

HostListeners

click
click()

Methods

isGrowlMoreThanTwo
isGrowlMoreThanTwo()

check whether sticky growls are greater than two

Returns : boolean
onClick
onClick()
Decorators :
@HostListener('click')
Returns : void
remove
remove(msg: EuiGrowlMessage)
Parameters :
Name Type Optional Description
msg EuiGrowlMessage No

The text message to appear in the container
Returns : void
removeAll
removeAll()

Removes all growl messages from the stack

Returns : void

Properties

contentId
Type : string
Default value : 'msg-detail'
el
Type : unknown
Default value : inject(ElementRef)
titleId
Type : string
Default value : 'msg-title'

Accessors

cssClasses
getcssClasses()
ariaLabelledBy
getariaLabelledBy()
ariaDescribedBy
getariaDescribedBy()

results matching ""

    No results matching ""