Info

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

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 : []

File

Description

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Inputs

Outputs

HostBindings

Methods

Properties

results matching ""

No results matching ""