### File

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

### Description

Individual notification item component displaying a single notification with read/unread status and actions. Renders notification content with icon, label, date, and optional mark as read button. Supports internal and external links with visual indicators for unread and important notifications. Emits events for item clicks and mark as read actions to parent notification panel.

Example :

    <!-- Used internally by eui-notifications -->
    <eui-notification-item
      [item]="notificationItem"
      [dateFormat]="'dd/MM/yyyy'"
      [isShowMarkAsRead]="true"
      (itemClick)="onItemClick($event)"
      (itemMarkAsRead)="onMarkAsRead($event)">
    </eui-notification-item>

Example :

    notificationItem: UxLinkLegacy<NotificationMetadata> = {
      id: '1',
      label: 'New message received',
      metadata: {
        read: false,
        date: new Date(),
        important: true
      }
    };

### Accessibility

- Entire item is clickable and keyboard accessible
- Visual indicators for read/unread status
- Mark as read button keyboard accessible
- Icon color changes based on read status
- Date displayed in accessible format
- Supports screen reader announcements

### Notes

- Typically used internally by eui-notifications component
- Not intended for standalone usage
- Item data uses UxLinkLegacy interface
- Metadata properties: read, date, important, new, url, urlExternal
- Visual distinction for unread items (darker icon)
- dateFormat for timestamp display (default: 'dd/MM/yyyy')
- Mark as read button optional via isShowMarkAsRead
- Clicking mark as read automatically sets metadata.read to true
- itemClick emitted on item click
- itemMarkAsRead emitted on mark as read action
- Icon color: 'secondary' for unread, 'secondary-light' for read
- Supports internal and external links via metadata.url/urlExternal
- Label truncation with tooltip for long text

### Metadata

selector | `eui-notification-item`
imports | `NgClass` `DatePipe` `EuiTruncatePipe` `TranslateModule` `EUI_ICON`
templateUrl | `./eui-notification-item.component.html`

### Index

###### Properties
string tooltipSize
###### Methods
onItemClick onItemMarkAsRead
###### Inputs
dateFormat isShowMarkAsRead item markAsReadLabel
###### Outputs
itemClick itemMarkAsRead
###### HostBindings
class
###### Accessors
iconColor

### Inputs

dateFormat
Type : `string`
Default value : `'dd/MM/yyyy'`
Date format string for displaying the notification timestamp. Accepts any valid Angular DatePipe format pattern.

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

item
Type : `UxLinkLegacy<NotificationMetadata>`
Notification item data containing label, metadata, and link information. Must conform to UxLinkLegacy interface with id, label, and metadata properties. Required for notification display.

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

### Outputs

itemClick
Type : `EventEmitter<UxLinkLegacy<NotificationMetadata>>`
Emitted when the notification item is clicked. Payload: UxLinkLegacy - the clicked notification item with metadata Triggered when user clicks anywhere on the notification item.

itemMarkAsRead
Type : `EventEmitter<UxLinkLegacy<NotificationMetadata>>`
Emitted when the mark as read button is clicked. Payload: UxLinkLegacy - the notification item marked as read Triggered when user clicks the mark as read action button. Automatically sets item.metadata.read to true.

### HostBindings

class
Type : `string`
Default value : `'eui-notification-item'`

### Methods

onItemClick
`onItemClick()`
Returns : `void`

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

### Properties

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

tooltipSize
Type : `string`
Default value : `'auto'`

### Accessors

iconColor
get `iconColor()`

# results matching ""

# No results matching ""