cometchat Ground truth:
@cometchat/chat-uikit-angular@5.xcomponent 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
Componentsuffix) into a standalone component'simports: []. No NgModule, noCUSTOM_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>/Contactsin 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
@Outputvs@Input-callback distinction is the #1 Angular-v5 trap. Most components use@OutputEventEmitters ((itemClick),(error),(callEnded)). But the call components also expose@Inputcallback 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>:@InputparentMessage,replyCount·@OutputcloseClick,backClick<cometchat-thread-view>:@Inputmode,replyCount,unreadReplyCount,parentMessage,announceOnOpen·@OutputthreadClick,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
@Inputcallback props (onAccept,onDecline,onError,onVoiceCallClick, …) AND some@OutputEventEmitters. Bind the form that exists per the tables.<cometchat-incoming-call>exposes both — prefer the@Inputcallbacks 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@Inputcallbacks: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@Inputcallbacks:onAccept,onDecline,onError- Slots:
itemView,titleView,subtitleView,leadingView,trailingView,acceptButtonView,declineButtonView @Output:callAccepted,callDeclined,error
CometChatOutgoingCallComponent
Selector: <cometchat-outgoing-call>
@Input:call,disableSoundForCalls,customSoundForCalls·@Inputcallback:onError· Slots:titleView,subtitleView,avatarView,cancelButtonView·@Output:callCanceled,error
CometChatOngoingCallComponent
Selector: <cometchat-ongoing-call>
The active WebRTC call surface.
@Input:sessionID,callSettingsBuilder,callWorkflow,isAudioOnly·@Inputcallback:onError· Slot:callScreenView·@Output:callEnded,error
CometChatCallLogsComponent
Selector: <cometchat-call-logs>
@Input:activeCall,callLogRequestBuilder,callSettingsBuilder,callInitiatedDateTimeFormat,showScrollbar·@Inputcallback: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
@Inputcallback 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