eui documentation
  1. Components
  2. EuiCommentThreadComponent

File

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

Description

eui-comment-thread component for displaying nested conversations with reply functionality. Provides a collapsible container for comment items with integrated textarea for adding new comments. Supports flexible textarea positioning (top or bottom) and optional collapse/expand behavior. Automatically counts and manages child comment items through content projection. Typically used for discussion threads, feedback sections, or collaborative commenting features.

Example :
<eui-comment-thread
  [currentAuthorAvatarUrl]="currentUser.avatar"
  [isOpen]="true"
  (commentSend)="onAddComment($event)">
  <eui-comment-item
    [authorName]="'John Doe'"
    [authorAvatarUrl]="'path/to/avatar.jpg'"
    [createdAt]="'2 hours ago'">
    This is a comment text.
  </eui-comment-item>
</eui-comment-thread>

Accessibility

  • Collapse/expand buttons include proper ARIA labels through translation keys
  • Comment count is announced to screen readers (singular/plural forms)
  • Nested comment structure maintains semantic HTML with proper list elements

Notes

  • Use textareaPosition to control whether new comments appear above or below existing ones
  • Set isCollapsable to false for always-visible comment threads
  • The component automatically counts child eui-comment-item elements

Metadata

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

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

currentAuthorAvatarUrl
Type : string
Default value : null

URL path to the current user's avatar image. Displayed alongside the comment textarea to identify the commenter. Optional.
hasTextarea
Type : boolean
Default value : true

Controls visibility of the comment textarea. When false, hides the textarea preventing new comment input.
isCollapsable
Type : boolean
Default value : true

Enables collapse/expand functionality for the comment thread. When true, displays toggle control; when false, thread remains static.
isOpen
Type : boolean
Default value : false

Controls the expanded/collapsed state of the comment thread. When true, thread is expanded showing all comments; when false, thread is collapsed.
placeholder
Type : string
Default value : 'eui.ADD-A-COMMENT'

Placeholder text displayed in the comment textarea when empty. Supports translation keys for internationalization.
textareaPosition
Type : unknown
Default value : 'top'

Position of the comment textarea relative to the comment items. When 'top', textarea appears above comments; when 'bottom', below comments.

Outputs

commentCancel
Type : EventEmitter

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

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

HostBindings

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

Properties

subCommentItems
Type : QueryList<EuiCommentItemComponent>
Decorators :
@ContentChildren(EuiCommentItemComponent)

Accessors

cssClasses
getcssClasses()
nbSubCommentItems
getnbSubCommentItems()

results matching ""

    No results matching ""