### File

`packages/components/layout/eui-notifications/eui-notifications.component.ts`

### Description

Notifications panel component that displays a dropdown list of user notifications with badge counter. Provides a comprehensive notification center with filtering, marking as read/unread, and action buttons. Supports customizable labels, date formatting, and unread count display with badge indicator. Integrates with overlay component for dropdown panel behavior and manages notification state. Emits events for all user interactions including item clicks, refresh, settings, and mark as read actions.

Example :

    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-items euiPositionRight>
            <eui-toolbar-item-notifications>
              <eui-notifications
                [count]="notificationItems.length"
                [items]="notificationItems"
                (itemClick)="onItemClick($event)"
                (markAllAsReadClick)="onMarkAllAsRead()"
                (refreshClick)="onRefresh()">
              </eui-notifications>
            </eui-toolbar-item-notifications>
          </eui-toolbar-items>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

Example :

    notificationItems = [
      { id: '1', label: 'New message', metadata: { read: false, date: new Date() } },
      { id: '2', label: 'Task completed', metadata: { read: true, date: new Date() } }
    ];

### Accessibility

- Bell icon button keyboard accessible
- Badge displays notification count for screen readers
- Dropdown panel keyboard navigable
- Each notification item is focusable
- ARIA labels for notification count
- Mark as read actions keyboard accessible

### Notes

- Typically used within eui-toolbar-item-notifications
- Positioned in toolbar right section
- Badge shows count or unread count
- Dropdown panel with overlay behavior
- Items array uses UxLinkLegacy interface
- Metadata includes read status and date
- Automatic unread count calculation when customUnreadCount is false
- All labels customizable or use default translations
- dateFormat for timestamp display (default: 'dd/MM/YYYY')
- Multiple action buttons: refresh, settings, mark all as read
- View all button in footer (optional)
- Empty state when no notifications
- Panel auto-closes on view all (configurable)
- Supports grouping by date (today vs older)

### Implements

`OnInit` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-notifications`
imports | `TranslateModule` `EuiNotificationItemComponent` `EUI_ICON` `EUI_ICON_BUTTON` `EUI_BADGE` `EUI_OVERLAY` `EUI_BUTTON`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-notifications.component.html`

### Index

###### Properties
currentDayNotifications isOverlayActive oldestNotifications string today unreadNotifications
###### Methods
onClicked onItemClick onItemMarkAsRead onMarkAllAsRead onNoNotificationFoundClick onRefresh onSettings onViewAllClick
###### Inputs
count customUnreadCount dateFormat headerTitleLabel isHidePanelOnViewAllAction isShowMarkAllAsReadButton isShowMarkAsRead isShowRefreshButton isShowSettingsButton isShowViewAllAction items markAllAsReadLabel markAsReadLabel markAsUnReadLabel nbUnreadCount noNotificationFoundLabel noNotificationFoundLink refreshLabel settingsLabel totalLabel unreadLabel viewAllNotificationsLabel
###### Outputs
itemClick itemMarkAsReadClick markAllAsReadClick noNotificationFoundClick notificationsClick refreshClick settingsClick viewAllClick
###### HostBindings
class

### Inputs

count
Type : `number`
Default value : `null`
Total count of notifications displayed in the badge. When null, badge shows unread count instead. When provided, overrides automatic counting. Optional.

customUnreadCount
Type : `boolean`
Default value : `false`
Uses custom unread count from nbUnreadCount input instead of automatic calculation. When true, disables automatic counting of unread notifications from items array.

dateFormat
Type : `string`
Default value : `'dd/MM/YYYY'`
Date format string for displaying notification timestamps. Accepts any valid date format pattern.

headerTitleLabel
Type : `string`
Default value : `null`
Custom label text for panel header title. When null, uses default translation key. Optional.

isHidePanelOnViewAllAction
Type : `boolean`
Default value : `true`
Automatically closes the notifications panel when "View All" is clicked. When false, panel remains open after clicking view all.

isShowMarkAllAsReadButton
Type : `boolean`
Default value : `true`
Shows the "Mark All as Read" button in the panel header. When false, hides the mark all as read functionality.

isShowMarkAsRead
Type : `boolean`
Default value : `true`
Shows the mark as read action button on individual notification items. When false, hides the mark as read functionality from notification items.

isShowRefreshButton
Type : `boolean`
Default value : `true`
Shows the refresh button in the panel header. When false, hides the refresh button.

isShowSettingsButton
Type : `boolean`
Default value : `true`
Shows the settings button in the panel header. When false, hides the settings button.

isShowViewAllAction
Type : `boolean`
Default value : `true`
Shows the "View All" action button in the panel footer. When false, hides the view all notifications button.

items
Type : `{}`
Default value : `[]`
Array of notification items to display in the panel. Each item should conform to UxLinkLegacy interface with id, label, and metadata properties.

markAllAsReadLabel
Type : `string`
Default value : `null`
Custom label text for "mark all as read" button. When null, uses default translation key. Optional.

markAsReadLabel
Type : `string`
Default value : `null`
Custom label text for "mark as read" action. When null, uses default translation key. Optional.

markAsUnReadLabel
Type : `string`
Default value : `null`
Custom label text for "mark as unread" action. When null, uses default translation key. Optional.

nbUnreadCount
Type : `number`
Default value : `null`
Number of unread notifications to display in the badge. When null and customUnreadCount is false, automatically calculated from items array. Optional.

noNotificationFoundLabel
Type : `string`
Default value : `null`
Custom label text for empty state message when no notifications exist. When null, uses default translation key. Optional.

noNotificationFoundLink
Type : `boolean`
Default value : `false`
Makes the "no notifications found" message clickable as a link. When true, emits noNotificationFoundClick event on click.

refreshLabel
Type : `string`
Default value : `null`
Custom label text for refresh button. When null, uses default translation key. Optional.

settingsLabel
Type : `string`
Default value : `null`
Custom label text for settings button. When null, uses default translation key. Optional.

totalLabel
Type : `string`
Default value : `null`
Custom label text for "total" count display. When null, uses default translation key. Optional.

unreadLabel
Type : `string`
Default value : `null`
Custom label text for "unread" status indicator. When null, uses default translation key. Optional.

viewAllNotificationsLabel
Type : `string`
Default value : `null`
Custom label text for "view all notifications" button. When null, uses default translation key. Optional.

### Outputs

itemClick
Type : `EventEmitter<UxLinkLegacy<NotificationMetadata>>`
Emitted when a notification item is clicked. Payload: UxLinkLegacy - the clicked notification item Triggered when user clicks on any notification item in the list.

itemMarkAsReadClick
Type : `EventEmitter<UxLinkLegacy<NotificationMetadata>>`
Emitted when the mark as read button on a notification item is clicked. Payload: UxLinkLegacy - the notification item to mark as read Triggered when user clicks the mark as read action on an individual notification.

markAllAsReadClick
Type : `EventEmitter<MouseEvent>`
Emitted when the "Mark All as Read" button is clicked. Payload: MouseEvent - the click event Triggered when user clicks the mark all as read button in the panel header.

noNotificationFoundClick
Type : `EventEmitter<void>`
Emitted when the "No notifications found" link is clicked. Payload: void Triggered when user clicks the no notifications message (when noNotificationFoundLink is true).

notificationsClick
Type : `EventEmitter<void>`
Emitted when the notifications bell icon is clicked to toggle the panel. Payload: void Triggered when user clicks the main notifications button to open/close the dropdown.

refreshClick
Type : `EventEmitter<void>`
Emitted when the refresh button is clicked to reload notifications. Payload: void Triggered when user clicks the refresh button in the notifications panel header.

settingsClick
Type : `EventEmitter<MouseEvent>`
Emitted when the settings button is clicked. Payload: MouseEvent - the click event Triggered when user clicks the settings button in the notifications panel header.

viewAllClick
Type : `EventEmitter<void>`
Emitted when the "View All" button is clicked. Payload: void Triggered when user clicks the view all notifications action button.

### HostBindings

class
Type : `string`
Default value : `'eui-notifications'`

### Methods

onClicked
`onClicked(event: MouseEvent | Event)`
Parameters :
Name | Type | Optional
event | `MouseEvent | Event` | No
Returns : `void`

onItemClick
`onItemClick(link: UxLinkLegacy<NotificationMetadata>)`
Parameters :
Name | Type | Optional
link | `UxLinkLegacy<NotificationMetadata>` | No
Returns : `void`

onItemMarkAsRead
`onItemMarkAsRead(link: UxLinkLegacy<NotificationMetadata>)`
Parameters :
Name | Type | Optional
link | `UxLinkLegacy<NotificationMetadata>` | No
Returns : `void`

onMarkAllAsRead
`onMarkAllAsRead(e: MouseEvent)`
Parameters :
Name | Type | Optional
e | `MouseEvent` | No
Returns : `void`

onNoNotificationFoundClick
`onNoNotificationFoundClick()`
Returns : `void`

onRefresh
`onRefresh(event: Event)`
Parameters :
Name | Type | Optional
event | `Event` | No
Returns : `void`

onSettings
`onSettings(e: MouseEvent)`
Parameters :
Name | Type | Optional
e | `MouseEvent` | No
Returns : `void`

onViewAllClick
`onViewAllClick(event: Event)`
Parameters :
Name | Type | Optional
event | `Event` | No
Returns : `void`

### Properties

currentDayNotifications
Type : `[]`
Default value : `[]`

isOverlayActive
Type : `unknown`
Default value : `false`

oldestNotifications
Type : `[]`
Default value : `[]`

string
Type : `string`
Default value : `'eui-notifications'`
Decorators : `@HostBinding('class')`

today
Type : `Date`
Default value : `new Date()`

unreadNotifications
Type : `[]`
Default value : `[]`

# results matching ""

# No results matching ""