Cometchat angular components

Ground truth: @cometchat/[email protected] component catalog (installed package types) + docs/ui-kit/angular. Official docs: https://www.cometchat.com/docs/ui-kit/angular/overview · Docs MCP: claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.

CometChat Angular UI Kit v5 — Component Catalog

Authoritative reference for every component you'll actually use. Verified against @cometchat/[email protected] bundled types. Never invent a selector, @Input, or @Output — look it up here (or grep node_modules/@cometchat/chat-uikit-angular/types/cometchat-chat-uikit-angular.d.ts).

Read <cometchat-angular-core> first.

How v5 components work

• Standalone. Import the component class (with the Component suffix) into a standalone component's imports: []. No NgModule, no CUSTOM_ELEMENTS_SCHEMA.
• Selector vs class: the HTML selector has no suffix (<cometchat-conversations>); the class does (CometChatConversationsComponent).
• No composites. There is no <cometchat-conversations-with-messages> / Contacts in v5. Build layouts by composing components (see <cometchat-angular-placement>).

Three binding mechanisms — get these right

Mechanism	Syntax	Example
@Input (data + config + hide flags)	[input]="value"	[user]="selectedUser"
@Output (EventEmitter)	(output)="handler($event)"	(itemClick)="onPick($event)"
@Input callback prop (a function passed as input)	[onCallback]="fnRef"	[onAccept]="handleAccept"
Slot view (@Input of type TemplateRef/component)	[slotView]="tmplRef"	[leadingView]="myTmpl"

The @Output vs @Input-callback distinction is the #1 Angular-v5 trap. Most components use @Output EventEmitters ((itemClick), (error), (callEnded)). But the call components also expose @Input callback props (onAccept, onDecline, onError, onVoiceCallClick, …). And <cometchat-incoming-call> exposes both ([onAccept] input AND (callAccepted) output). Bind the one that exists — the tables below mark which is which.

import { Component } from "@angular/core";
import { CometChatConversationsComponent } from "@cometchat/chat-uikit-angular";
import { CometChat } from "@cometchat/chat-sdk-javascript";

@Component({
  selector: "app-conversations",
  standalone: true,
  imports: [CometChatConversationsComponent],
  template: `
    <cometchat-conversations
      [showSearchBar]="true"
      (itemClick)="onConversation($event)"
      (error)="onError($event)">
    </cometchat-conversations>`,
})
export class AppConversationsComponent {
  onConversation(conversation: CometChat.Conversation) { /* … */ }
  onError(e: CometChat.CometChatException) { /* … */ }
}

---

List components

CometChatConversationsComponent

Selector: <cometchat-conversations>

The conversation list. Drives the left pane of a chat layout.

• Key @Input: conversationsRequestBuilder, activeConversation, selectionMode, options, showSearchBar, showScrollbar, lastMessageDateTimeFormat, textFormatters, disableSoundForMessages, customSoundForMessages
• Hide flags: hideReceipts, hideError, hideDeleteConversation, hideUserStatus, hideGroupType, disableDefaultContextMenu
• Slot views (@Input): headerView, menuView, loadingView, emptyView, errorView, searchView, itemView, leadingView, titleView, subtitleView, trailingView
• @Output: itemClick, select, error, searchBarClick, contextMenuOpen, contextMenuClose, scrollToTop, scrollToBottom, selectionChange

CometChatUsersComponent

Selector: <cometchat-users>

• @Input: usersRequestBuilder, searchRequestBuilder, searchKeyword, activeUser, selectionMode, options, showSectionHeader, sectionHeaderKey, showScrollbar, showSelectedUsersPreview
• Hide flags: hideSearch, hideError, hideUserStatus, disableLoadingState, disableDefaultContextMenu
• Slots: headerView, menuView, loadingView, emptyView, errorView, itemView, leadingView, titleView, subtitleView, trailingView
• @Output: itemClick, select, error, empty, selectionChange

CometChatGroupsComponent

Selector: <cometchat-groups>

• @Input: groupsRequestBuilder, searchRequestBuilder, activeGroup, selectionMode, options, showScrollbar
• Hide flags: hideSearch, hideError, hideGroupType, disableDefaultContextMenu
• Slots: headerView, menuView, loadingView, emptyView, errorView, itemView, leadingView, titleView, subtitleView, trailingView
• @Output: itemClick, select, error, selectionChange

CometChatGroupMembersComponent

Selector: <cometchat-group-members>

• @Input: group (required), groupMemberRequestBuilder, searchRequestBuilder, searchKeyword, selectionMode, options, showScrollbar
• Hide flags: hideSearch, hideError, hideUserStatus, hideKickMemberOption, hideBanMemberOption, hideScopeChangeOption, disableLoadingState, disableDefaultContextMenu
• Slots: headerView, menuView, loadingView, errorView, emptyView, itemView, leadingView, titleView, subtitleView, trailingView
• @Output: error, itemClick, selectionChange, empty

---

Messaging components

CometChatMessageHeaderComponent

Selector: <cometchat-message-header>

Header bar above the message list. Pass user OR group (mutually exclusive).

• @Input: user, group, callSettingsBuilder, lastActiveAtDateTimeFormat, summaryGenerationMessageCount, enableAutoSummaryGeneration
• Show/hide: hideUserStatus, showBackButton, hideVoiceCallButton, hideVideoCallButton, showSearchOption, showConversationSummaryButton
• Slots: headerView, itemView, leadingView, titleView, subtitleView, trailingView, backButtonView, auxiliaryButtonView
• @Output: backClick, itemClick, searchClick, conversationSummaryClick, error, voiceCallClick, videoCallClick

CometChatMessageListComponent

Selector: <cometchat-message-list>

The message stream. Pass user OR group (and parentMessageId for threads).

• Key @Input: user, group, parentMessageId, messagesRequestBuilder, reactionsRequestBuilder, textFormatters, messageAlignment, scrollToBottomOnNewMessages, goToMessageId, quickOptionsCount, additionalOptions, optionsOverride
• AI/replies: showConversationStarters, showSmartReplies, smartRepliesKeywords, smartRepliesDelayDuration
• Hide flags (many): hideReceipts, hideDateSeparator, hideStickyDate, hideAvatar, hideGroupActionMessages, hideError, hideReplyInThreadOption, hideTranslateMessageOption, hideEditMessageOption, hideDeleteMessageOption, hideReactionOption, hideMessagePrivatelyOption, hideCopyMessageOption, hideMessageInfoOption, hideReplyOption, hideTimestamp, hideModerationView, hideFlagMessageOption, showMarkAsUnreadOption, startFromUnreadMessages, disableInteraction
• Slots: headerView, footerView, emptyView, errorView, loadingView, bubbleFooterView, appendView
• @Output: error, threadRepliesClick, reactionClick, reactionListItemClick, smartReplyClick, conversationStarterClick, messagePrivatelyClick, replyClick

CometChatMessageComposerComponent

Selector: <cometchat-message-composer>

The input box. Pass user OR group (and parentMessageId for threads).

• Key @Input: user, group, parentMessageId, placeholderText, initialComposerText, text, maxHeight, enterKeyBehavior, attachmentOptions, maxAttachments, allowedFileTypes, maxFileSize, layout, textFormatters, messageToEdit, messageToReply, mentionsUsersRequestBuilder, mentionsGroupMembersRequestBuilder
• Hide flags: hideAttachmentButton, hideImageAttachmentOption, hideVideoAttachmentOption, hideAudioAttachmentOption, hideFileAttachmentOption, hidePollsOption, hideCollaborativeDocumentOption, hideCollaborativeWhiteboardOption, hideEmojiKeyboardButton, hideVoiceRecordingButton, hideStickersButton, hideLiveReaction, hideSendButton, hideRichTextToolbar, disableMentions, disableMentionAll, disableTypingEvents, enableRichText
• Slots: headerView, footerView, sendButtonView, auxiliaryButtonView, secondaryButtonView, attachmentIconView, voiceRecordingIconView, emojiIconView, errorView
• @Output: textChange, sendButtonClick, error, closePreview, attachmentAdded, attachmentRemoved, mentionSelected

CometChatMessageInformationComponent

Selector: <cometchat-message-information>

• @Input: message, dateTimeFormat, textFormatters, showScrollbar · @Output: closeClick

Threads — <cometchat-thread-header> / <cometchat-thread-view>

• <cometchat-thread-header>: @Input parentMessage, replyCount · @Output closeClick, backClick
• <cometchat-thread-view>: @Input mode, replyCount, unreadReplyCount, parentMessage, announceOnOpen · @Output threadClick, closeClick
• For a thread pane, render <cometchat-message-list> + <cometchat-message-composer> with the same [parentMessageId].

CometChatReactionsComponent

Selector: <cometchat-reactions>

• @Input: message, alignment, reactionsRequestBuilder, hoverDebounceTime · @Output: reactionClick, reactionListItemClick

CometChatSearchComponent

Selector: <cometchat-search>

Unified conversation + message search.

• Key @Input: searchIn, searchFilters, initialSearchFilter, defaultSearchText, uid, guid, conversationsRequestBuilder, messagesRequestBuilder, hideBackButton (+ per-result slot views)
• @Output: backClick, conversationClick, messageClick, searchError

---

Call components

Binding nuance: call components use @Input callback props (onAccept, onDecline, onError, onVoiceCallClick, …) AND some @Output EventEmitters. Bind the form that exists per the tables. <cometchat-incoming-call> exposes both — prefer the @Input callbacks for accept/decline (they carry the kit's call handling) and use the @Outputs for observing.

CometChatCallButtonsComponent

Selector: <cometchat-call-buttons>

Voice/video buttons for a user or group. Drop into a header or contact row.

• @Input: user, group, callSettingsBuilder, hideVoiceCallButton, hideVideoCallButton, hideOverlays, outgoingCallDisableSoundForCalls, outgoingCallCustomSoundForCalls
• @Input callbacks: onVoiceCallClick, onVideoCallClick, onError
• Slots: voiceCallButtonView, videoCallButtonView
• @Output: error

CometChatIncomingCallComponent

Selector: <cometchat-incoming-call>

Incoming-call banner/overlay. Mount app-wide (see calls skill).

• @Input: call, disableSoundForCalls, customSoundForCalls
• @Input callbacks: onAccept, onDecline, onError
• Slots: itemView, titleView, subtitleView, leadingView, trailingView, acceptButtonView, declineButtonView
• @Output: callAccepted, callDeclined, error

CometChatOutgoingCallComponent

Selector: <cometchat-outgoing-call>

• @Input: call, disableSoundForCalls, customSoundForCalls · @Input callback: onError · Slots: titleView, subtitleView, avatarView, cancelButtonView · @Output: callCanceled, error

CometChatOngoingCallComponent

Selector: <cometchat-ongoing-call>

The active WebRTC call surface.

• @Input: sessionID, callSettingsBuilder, callWorkflow, isAudioOnly · @Input callback: onError · Slot: callScreenView · @Output: callEnded, error

CometChatCallLogsComponent

Selector: <cometchat-call-logs>

• @Input: activeCall, callLogRequestBuilder, callSettingsBuilder, callInitiatedDateTimeFormat, showScrollbar · @Input callback: onError · Slots: menuView, itemView, leadingView, titleView, subtitleView, trailingView, loadingView, emptyView, errorView · @Output: itemClick, callButtonClicked

---

AI components

CometChatConversationStarterComponent

<cometchat-conversation-starter> — @Input user, group · @Output starterClick

CometChatConversationSummaryComponent

<cometchat-conversation-summary> — @Input getConversationSummary, closeCallback

CometChatSmartRepliesComponent

<cometchat-smart-replies> — smart-reply chips

CometChatAIAssistantChat

<cometchat-ai-assistant-chat> (+ CometChatAIAssistantChatHistory / CometChatAIAssistantMessageBubble) — AI assistant chat surfaces.

AI views are usually surfaced through <cometchat-message-list>'s showSmartReplies / showConversationStarters inputs and the header's summary button — see the cometchat-angular-features skill.

---

Other exported components (selectors)

Building blocks + bubbles + dialogs you rarely instantiate directly (the list/message components compose them), but they're exported and available: <cometchat-avatar>, <cometchat-button>, <cometchat-list-item>, <cometchat-date>, <cometchat-search-bar>, <cometchat-emoji-keyboard>, <cometchat-stickers-keyboard>, <cometchat-media-recorder>, <cometchat-reaction-list>, <cometchat-reaction-info>, <cometchat-create-poll>, <cometchat-fullscreen-viewer>, <cometchat-confirm-dialog>, <cometchat-flag-message-dialog>, <cometchat-change-scope>, <cometchat-context-menu>, <cometchat-popover>, <cometchat-toast>, <cometchat-typing-indicator>, and the bubble set (<cometchat-text-bubble>, -image-bubble, -video-bubble, -audio-bubble, -file-bubble, -call-bubble, -poll-bubble, -sticker-bubble, -collaborative-document-bubble, -collaborative-whiteboard-bubble, -action-bubble, -delete-bubble, -message-bubble).

To confirm any of their bindings, grep the bundled .d.ts for ɵɵComponentDeclaration<<Class>, — the input/output names are in the type literal.

---

Anti-patterns

1. Don't invent bindings. If a prop isn't in this catalog (or the .d.ts), it doesn't exist. v4 prop names frequently differ from v5.
2. Don't bind a call @Input callback as an @Output (or vice-versa). [onAccept]="fn" (input) vs (callAccepted)="fn($event)" (output) — use the one listed.
3. Don't reach for a composite (<cometchat-conversations-with-messages>) — removed in v5. Compose manually.
4. Don't pass both [user] and [group] to header/list/composer — they're mutually exclusive; pass exactly one.
5. Don't add CUSTOM_ELEMENTS_SCHEMA — v5 components are real Angular components; importing the class is enough.
6. Don't forget to import the component class into the standalone component's imports: [] — otherwise the selector renders as an unknown element.

Pointers

• <cometchat-angular-core> — setup, init, login
• <cometchat-angular-placement> — composing these into routes/modals/drawers
• <cometchat-angular-customization> — slot templates, formatters, options overrides
• <cometchat-angular-calls> — full call flow + incoming-call mounting