| name | cometchat-angular-components |
| description | Component catalog for the CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) — standalone <cometchat-*> selectors, verified @Input bindings, @Output events, @Input callback props, and template slot views. Always loaded before writing any <cometchat-*> HTML. Never invent selectors or bindings — look them up here. |
| license | MIT |
| compatibility | Angular >=17 <22; @cometchat/chat-uikit-angular ^5.0 |
| metadata | {"author":"CometChat","version":"4.0.0","tags":"cometchat angular components catalog selectors inputs outputs standalone v5"} |
Ground truth: @cometchat/chat-uikit-angular@5.x 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/chat-uikit-angular@5.0.2 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
- 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.
- 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.
- Don't reach for a composite (
<cometchat-conversations-with-messages>) — removed in v5. Compose manually.
- Don't pass both
[user] and [group] to header/list/composer — they're mutually exclusive; pass exactly one.
- Don't add
CUSTOM_ELEMENTS_SCHEMA — v5 components are real Angular components; importing the class is enough.
- 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
