### 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

- comment
- Public fullText
- Public isExpanded
- Public isTruncated
- Public isVisibleReplyInput
- role
- subCommentItems
- Public truncatedText

###### Methods

- Public onCommentCancel
- Public onCommentSend
- Public onToggleOpen
- Public onToggleReplyInput
- toggleExpanded

###### Inputs

- authorAvatarUrl
- authorName
- commentCharLimit
- createdAt
- currentAuthorAvatarUrl
- hasChildren
- isOpen

###### Outputs

- commentCancel
- commentSend

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses
- nbSubCommentItems

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

nbSubCommentItems
get `nbSubCommentItems()`

# results matching ""

# No results matching ""