### 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
subCommentItems
###### Methods
Public onCommentCancel Public onCommentSend Public onToggleOpen
###### Inputs
currentAuthorAvatarUrl hasTextarea isCollapsable isOpen placeholder textareaPosition
###### Outputs
commentCancel commentSend
###### HostBindings
class
###### Accessors
cssClasses nbSubCommentItems

### 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
get `cssClasses()`

nbSubCommentItems
get `nbSubCommentItems()`

# results matching ""

# No results matching ""