### 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

- contentId
- el
- titleId

###### Methods

- isGrowlMoreThanTwo
- onClick
- remove
- removeAll

###### Inputs

- ariaLive
- callback
- closeAllSticky
- e2eAttr
- life
- position
- sticky
- value

###### Outputs

- growlClick
- growlClose

###### HostBindings

- attr.aria-describedby
- attr.aria-labelledby
- attr.role
- class

###### HostListeners

- click

###### Accessors

- cssClasses
- ariaLabelledBy
- ariaDescribedBy

### 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
get `cssClasses()`

ariaLabelledBy
get `ariaLabelledBy()`

ariaDescribedBy
get `ariaDescribedBy()`

# results matching ""

# No results matching ""