eui documentation
  1. Components
  2. EuiCommentItemComponent

File

packages/components/eui-comment-thread/comment-item/eui-comment-item.component.ts

Description

Individual comment item component displaying a single comment with author information, timestamp, and nested replies. Provides automatic text truncation with expand/collapse functionality for long comments. Supports nested comment threads with collapsible child comments and integrated reply textarea. Displays author avatar, name, creation timestamp, and optional action buttons. Automatically counts and manages child comment items through content projection.

Example :
<eui-comment-item
  [authorName]="'Jane Smith'"
  [authorAvatarUrl]="'path/to/avatar.jpg'"
  [createdAt]="'1 day ago'"
  [currentAuthorAvatarUrl]="currentUser.avatar"
  [commentCharLimit]="300"
  (commentSend)="onReply($event)">
  This is the comment text that will be automatically truncated if it exceeds the character limit.
  <eui-comment-item-right-actions>
    <button euiIconButton euiBasicButton icon="eui-edit"></button>
  </eui-comment-item-right-actions>
</eui-comment-item>

Accessibility

  • "Read more" and "Read less" links are keyboard accessible with proper focus management
  • Reply link is accessible via keyboard navigation
  • Nested comment structure uses semantic <ul> and <li> elements
  • Avatar component includes proper alt text support

Notes

  • Comment text is automatically truncated based on commentCharLimit (default: 500 characters)
  • Nested eui-comment-item elements are automatically counted and displayed
  • Reply textarea appears inline when user clicks "Answer" link
  • Use eui-comment-item-right-actions for action buttons like edit or delete

Implements

AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-comment-item
imports TranslateModule EUI_AVATAR EUI_BUTTON EUI_ICON EuiCommentTextareaComponent
styleUrls ../styles/_index.scss
templateUrl ./eui-comment-item.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

authorAvatarUrl
Type : string
Default value : null

URL path to the comment author's avatar image. Displayed alongside the comment to identify the author. Optional.
authorName
Type : string
Default value : null

Name of the comment author. Displayed as the comment header to identify who wrote the comment. Optional.
commentCharLimit
Type : number
Default value : 500

Maximum character length before comment text is truncated. Comments exceeding this limit show "Read more" link to expand full text.
createdAt
Type : string
Default value : null

Timestamp or date string indicating when the comment was created. Displayed in the comment header for temporal context. Optional.
currentAuthorAvatarUrl
Type : string
Default value : null

URL path to the current user's avatar image. Used for the reply textarea to identify the replying user. Optional.
hasChildren
Type : boolean
Default value : false

Indicates whether this comment has nested child comments. When true, displays collapse/expand controls for child comments.
isOpen
Type : boolean
Default value : false

Controls the expanded/collapsed state of nested child comments. When true, child comments are visible; when false, they are hidden.

Outputs

commentCancel
Type : EventEmitter

Emitted when the user cancels reply input. Payload: void Triggered when user clicks cancel button in the reply textarea.
commentSend
Type : EventEmitter

Emitted when the user submits a reply comment. Payload: string - the reply comment text entered by the user Triggered when user clicks send button in the reply textarea.

HostBindings

attr.role
Type : string
Default value : 'listitem'
class
Type : string

Methods

Public onCommentCancel
onCommentCancel()
Returns : void
Public onCommentSend
onCommentSend(comment: string)
Parameters :
Name Type Optional
comment string No
Returns : void
Public onToggleOpen
onToggleOpen()
Returns : void
Public onToggleReplyInput
onToggleReplyInput(e: MouseEvent)
Parameters :
Name Type Optional
e MouseEvent No
Returns : void
toggleExpanded
toggleExpanded(e: MouseEvent)
Parameters :
Name Type Optional
e MouseEvent No
Returns : void

Properties

comment
Type : ElementRef<HTMLElement>
Decorators :
@ViewChild('comment', {static: true})
Public fullText
Type : string
Default value : ''
Public isExpanded
Type : unknown
Default value : false
Public isTruncated
Type : unknown
Default value : false
Public isVisibleReplyInput
Type : unknown
Default value : false
role
Type : string
Default value : 'listitem'
Decorators :
@HostBinding('attr.role')
subCommentItems
Type : QueryList<EuiCommentItemComponent>
Decorators :
@ContentChildren(EuiCommentItemComponent)
Public truncatedText
Type : string
Default value : ''

Accessors

cssClasses
getcssClasses()
Returns : string
nbSubCommentItems
getnbSubCommentItems()

results matching ""

    No results matching ""