{"id":"4405c59b-6719-424a-bb2a-62717b4797af","shortId":"appnJL","kind":"skill","title":"cometchat-angular-components","tagline":"Component catalog for the CometChat Angular UI Kit v4 — HTML selector names, Angular Input bindings, Output events, slot templates, request builders, style objects, and composite components. Always loaded before writing HTML.","description":"## Purpose\n\nTeaches Claude every component the Angular UI Kit v4 exports, with the HTML selectors, Angular `[Input]` bindings, `(Output)` events, `ng-template` slot views, request builders, and style objects that actually exist. This is the authoritative reference — never invent component names or bindings; look them up here.\n\n**Read `cometchat-angular-core` before this skill** — module imports, `CUSTOM_ELEMENTS_SCHEMA`, and init/login are prerequisites.\n\nGround truth: `docs/ui-kit/angular/components-overview`, per-component doc pages at `docs/ui-kit/angular/`, and `@cometchat/chat-uikit-angular@4.x` exports.\n\n---\n\n## How to use this catalog\n\nAngular UI Kit components are Angular standalone components that render as custom HTML elements. Three patterns cover almost every use case:\n\n| Pattern | Components | Use when |\n|---|---|---|\n| **Composite (quickest)** | `` — renders a 3-panel layout (Conversations + Messages + Details) in one tag | Full-page route placements with **≥ 1024px** of horizontal space. The composite reserves room for a Details panel — in narrower containers (modals, sidebars, drawers) the Details slot stays empty and the layout looks broken. |\n| **Two-pane (custom layout)** | `` + `` side by side | Modal / dialog / sidebar / drawer placements (anywhere narrower than ~1024px). You wire the click handler from Conversations to set the active user/group on Messages. |\n| **Granular (full control)** | `` + `` + `` | Embedded chat surfaces with no inbox — e.g. a \"Contact seller\" modal that opens a 1:1 thread directly, or a per-page chat panel pinned to a specific user/group. |\n\n**Data flow:** a list component calls the `[onItemClick]` Input callback with a `CometChat.Conversation` / `User` / `Group`. Extract the entity and pass it as `[user]` or `[group]` to the message components.\n\n---\n\n## Binding conventions (applies to every `` component)\n\n| Binding type | Angular syntax | Example |\n|---|---|---|\n| **Input (data in)** | `[propName]=\"value\"` | `[user]=\"selectedUser\"` |\n| **Input callback (`on*`)** | `[onXxx]=\"handlerFn\"` | `[onItemClick]=\"onConvClick\"` |\n| **String literal** | `propName=\"string\"` | `title=\"Chats\"` |\n| **Template slot** | `[slotName]=\"templateRef\"` + `` | `[listItemView]=\"customItem\"` |\n| **Style object** | `[componentStyle]=\"styleInstance\"` | `[conversationsStyle]=\"myStyle\"` |\n\n> **Critical — `on*` props are `@Input()` callbacks, NOT `@Output()` events.** Use `[onItemClick]=\"myFn\"` (square brackets), never `(onItemClick)=\"myFn($event)\"` (round brackets). This applies to every `on*` prop across all CometChat components: `[onItemClick]`, `[onError]`, `[onSelect]`, `[onSendButtonClick]`, `[onAccept]`, `[onDecline]`, `[onVoiceCallClick]`, `[onVideoCallClick]`, etc.\n\n---\n\n## 1. Composite Components\n\n### CometChatConversationsWithMessages\n\nThe fastest integration — renders a full inbox + message thread + details panel (3-panel layout) in one component. Handles routing between conversations and messages internally.\n\n> **⚠️ Width requirement: ≥ 1024px.** This composite renders a 3-panel layout (Conversations + Messages + Details). Below ~1024px of available width, the Details panel stays empty and visible — the layout looks broken with whitespace where Details should be. **Do not use this composite inside a modal, dialog, drawer, or sidebar** unless the container is at least 1024px wide. Use the Two-pane pattern (`` + ``) for narrower placements (see § *Two-pane modal layout* in `cometchat-angular-placement`).\n\n```html\n\n\n```\n\n```typescript\n// app.module.ts\nimport { CometChatConversationsWithMessages } from \"@cometchat/chat-uikit-angular\";\n@NgModule({ imports: [CometChatConversationsWithMessages], schemas: [CUSTOM_ELEMENTS_SCHEMA] })\n```\n\nKey inputs: `[conversationsWithMessagesStyle]`, `[messagesConfiguration]`, `[conversationsConfiguration]`.\n\n### CometChatUsersWithMessages\n\nRenders a users list + message thread.\n\n```html\n\n```\n\n### CometChatGroupsWithMessages\n\nRenders a groups list + message thread.\n\n```html\n\n```\n\n---\n\n## 2. Lists\n\n### CometChatConversations\n\nScrollable list of recent conversations (user + group).\n\n```html\n\n```\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\n@Component({ /* ... */ })\nexport class AppComponent {\n conversationsRequestBuilder = new CometChat.ConversationsRequestBuilder().setLimit(20);\n\n handleConvClick = (conversation: CometChat.Conversation): void => {\n const entity = conversation.getConversationWith();\n const type = conversation.getConversationType();\n // navigate or set selectedUser / selectedGroup\n };\n\n handleError = (error: CometChat.CometChatException): void => {\n console.error(error);\n };\n}\n```\n\nKey inputs: `[conversationsRequestBuilder]`, `[onItemClick]`, `[onSelect]`, `[onError]`, `title`, `[hideReceipt]`, `[hideSeparator]`, `[disableUsersPresence]`, `[disableTyping]`, `[disableMentions]`, `[activeConversation]`, `[listItemView]`, `[menu]`, `[options]`, `[textFormatters]`, `[conversationsStyle]`, `[avatarStyle]`, `[statusIndicatorStyle]`, `[badgeStyle]`, `[dateStyle]`, `[listItemStyle]`.\n\n### CometChatUsers\n\n```html\n\n```\n\nKey inputs: `[usersRequestBuilder]`, `[onItemClick]`, `[onSelect]`, `[onError]`, `title`, `[hideStatus]`, `[hideSearch]`, `[listItemView]`, `[menu]`, `[options]`, `[usersStyle]`, `[avatarStyle]`, `[statusIndicatorStyle]`, `[listItemStyle]`.\n\n### CometChatGroups\n\n```html\n\n```\n\nKey inputs: `[groupsRequestBuilder]`, `[onItemClick]`, `[onSelect]`, `[onError]`, `title`, `[hideSearch]`, `[listItemView]`, `[menu]`, `[options]`, `[groupsStyle]`, `[avatarStyle]`, `[listItemStyle]`.\n\n### CometChatGroupMembers\n\n```html\n\n```\n\nKey inputs: `[group]` (**required** — pass a `CometChat.Group` instance), `[groupMemberRequestBuilder]`, `[onItemClick]`, `[onBack]`, `[onClose]`, `[options]`, `[groupMembersStyle]`, `[hideSearch]`, `[selectionMode]`, `[disableUsersPresence]`.\n\n---\n\n## 3. Messages\n\n### CometChatMessages\n\nComposite message view — header + list + composer in one component.\n\n```html\n\n```\n\nKey inputs: `[user]` OR `[group]` (one required), `[messageHeaderConfiguration]`, `[messageListConfiguration]`, `[messageComposerConfiguration]`, `[messagesStyle]`.\n\n### CometChatMessageHeader\n\n```html\n\n```\n\nKey inputs: `[user]` OR `[group]`, `[onBack]`, `[hideBackButton]`, `[menu]`, `[subtitleView]`, `[listItemView]`, `[messageHeaderStyle]`, `[avatarStyle]`, `[statusIndicatorStyle]`, `[disableUsersPresence]`, `[disableTyping]`.\n\n> **Note:** `[hideVideoCallButton]` and `[hideVoiceCallButton]` do **not** exist on ``. Those inputs live on ``. To hide call buttons from the header, simply omit `` from the `[menu]` slot.\n\n### CometChatMessageList\n\nScrollable message feed. Handles reactions, receipts, mentions, threads, and media.\n\n```html\n\n```\n\nKey inputs: `[user]` OR `[group]`, `[parentMessageId]` (for thread replies), `[messagesRequestBuilder]`, `[textFormatters]`, `[templates]`, `[hideReceipt]`, `[disableReactions]`, `[disableSoundForMessages]`, `[disableMentions]`, `[hideError]`, `[hideDateSeparator]`, `[onThreadRepliesClick]` (Input callback — use `[onThreadRepliesClick]=\"handler\"` not `(onThreadRepliesClick)`), `[onError]` (Input callback), `[emptyStateView]`, `[errorStateView]`, `[loadingStateView]`, `[messageListStyle]`, `[reactionsConfiguration]`, `[messageInformationConfiguration]`.\n\n> **Important — all `on*` props are `@Input()` callbacks, not `@Output()` events.** Use `[onThreadRepliesClick]=\"myFn\"` (square brackets), never `(onThreadRepliesClick)=\"myFn($event)\"` (round brackets). The same applies to `[onError]`.\n\n> **Note:** `[hideReplyInThreadOption]`, `[hideReceipts]`, `[hideReactions]`, `[hideReplyOption]`, `[hideEditMessageOption]`, `[hideDeleteMessageOption]`, `[hideTranslateMessageOption]` do **not** exist in the Angular v4 UIKit. Use `[disableReactions]` to disable reactions. Message action options (edit, delete, translate, thread) are controlled via the `[options]` callback or `[templates]` — not individual hide inputs.\n\n### CometChatMessageComposer\n\nRich text input. Attachments, mentions, voice notes, sticker picker.\n\n```html\n\n```\n\nKey inputs: `[user]` OR `[group]`, `[parentMessageId]` (for thread composer), `placeholderText`, `[textFormatters]`, `[attachmentOptions]`, `[auxilaryButtonView]` (**note spelling: one `i` — `auxilary` not `auxiliary`**), `[headerView]`, `[sendButtonView]`, `[onSendButtonClick]` (Input callback), `[onError]` (Input callback), `[onTextChange]` (Input callback), `[disableMentions]`, `[disableSoundForMessages]`, `[messageComposerStyle]`.\n\n> **Important — all `on*` props are `@Input()` callbacks, not `@Output()` events.** Use `[onSendButtonClick]=\"myFn\"` (square brackets), never `(onSendButtonClick)=\"myFn($event)\"` (round brackets). The same applies to `[onError]` and `[onTextChange]`.\n\n---\n\n## 4. Calling (separate SDK)\n\nCall components require `@cometchat/calls-sdk-javascript` to be installed. Do not import these if the calls SDK isn't in the project.\n\n### CometChatCallButtons\n\nVoice + video call initiators. Drop into the message header's `[menu]` slot.\n\n```html\n\n```\n\n> **All `on*` props are `@Input()` callbacks.** Use `[onVoiceCallClick]=\"myFn\"` (square brackets), never `(onVoiceCallClick)=\"myFn($event)\"` (round brackets).\n\nKey inputs: `[user]` OR `[group]`, `[onVoiceCallClick]` (Input callback), `[onVideoCallClick]` (Input callback), `[onError]` (Input callback), `[callButtonsStyle]`.\n\n### CometChatIncomingCall\n\nIncoming call notification. Render at the app root so it's visible on any route.\n\n```html\n\n```\n\n> **All `on*` props are `@Input()` callbacks.** Use `[onAccept]=\"myFn\"` (square brackets), never `(onAccept)=\"myFn($event)\"` (round brackets).\n\nKey inputs: `[call]`, `[onAccept]` (Input callback), `[onDecline]` (Input callback), `[onError]` (Input callback), `[incomingCallStyle]`, `[avatarStyle]`.\n\n### CometChatOutgoingCall\n\nRinging screen after initiating a call.\n\n```html\n\n```\n\n> Input name is `[onCloseClicked]` (with `d` at the end), not `onCloseClick`. It is an `@Input()` callback — use square brackets.\n\nKey inputs: `[call]`, `[onCloseClicked]` (Input callback), `[onError]` (Input callback), `[outgoingCallStyle]`, `[avatarStyle]`.\n\n### CometChatOngoingCall\n\nIn-call UI — tiles, controls, mute, end-call.\n\n```html\n\n```\n\nKey inputs: `[sessionID]`, `[onError]` (Input callback), `[ongoingCallStyle]`, `[callSettingsBuilder]`.\n\n> **`(onCallEnded)` does not exist** on this component — there is no `@Output()` for call end. To detect when a call ends, subscribe to `CometChatCallEvents.ccCallEnded` from the event bus instead:\n> ```typescript\n> import { CometChatCallEvents } from \"@cometchat/chat-uikit-angular\";\n> CometChatCallEvents.ccCallEnded.subscribe(() => {\n> // call ended — navigate away or update state\n> });\n> ```\n\n### CometChatCallLogs\n\nScrollable call history.\n\n```html\n\n```\n\n> **`[onItemClick]` is an `@Input()` callback** — use square brackets, not round brackets.\n\n---\n\n## 5. Search\n\nThe Angular v4 UIKit does **not** export a standalone `` Angular module. Search is built into the list components via the `[hideSearch]` input:\n\n```html\n\n\n\n\n\n\n\n\n```\n\n> **Hard rule — never roll your own search.** Use `[hideSearch]=\"false\"` on the list components. Do NOT build custom `` search bars — they bypass the SDK's pagination and highlighting.\n\n---\n\n## 5b. Details, contacts, and group management\n\n### CometChatDetails\n\nUnified details panel — handles both users and groups automatically. Shows profile, status, block/unblock, group members, leave group, and more in one component. **Prefer this over building custom detail panels.**\n\n```html\n\n```\n\nKey inputs: `[user]` OR `[group]`, `[onClose]`.\n\n### CometChatContacts\n\nUser + group picker for starting new conversations. Renders a searchable list of users and groups. Use as a \"New Chat\" overlay.\n\n```html\n\n```\n\nKey inputs: `[onItemClick]`, `[onClose]`.\n\n### CometChatAddMembers\n\nAdd members to an existing group.\n\n```html\n\n```\n\n### CometChatBannedMembers\n\nList and unban banned members of a group.\n\n```html\n\n```\n\n### CometChatTransferOwnership\n\nTransfer group ownership to another member.\n\n```html\n\n```\n\n### CometChatCreateGroup\n\nDialog for creating a new group.\n\n```html\n\n```\n\n> **Not in Angular v4:** `CometChatNewChat`, `CometChatBlockedUsers`, `CometChatSearchBar`, `CometChatThreadHeader` (standalone), `CometChatCompactMessageComposer` — these are React v6 UIKit only. Use `` for new chat, `` for block/unblock, and `` for threads.\n\n---\n\n## 5c. Thread header\n\n### CometChatThreadHeader (via ``)\n\nThe Angular UI Kit exposes threaded messages via the `` composite component, which includes the thread header, scoped message list, and scoped composer in one tag.\n\n```html\n\n```\n\n> **`[onClose]` is an `@Input()` callback** — use square brackets, not round brackets.\n\nFor fully manual stitching (separate list + composer with `[parentMessageId]`), see `cometchat-angular-placement` § threading pattern.\n\n---\n\n## 6. Atoms (primitives for custom composition)\n\nBuilding blocks used inside `ng-template` slot overrides or custom components.\n\n| Selector | Purpose |\n|---|---|\n| `` | Circular avatar. `[image]`, `[name]` (initials fallback), `[avatarStyle]` |\n| `` | Unread count badge. `[count]`, `[badgeStyle]` |\n| `` | Online/offline dot. `[status]`, `[statusIndicatorStyle]` |\n| `` | Standard row — leading + title/subtitle + trailing. `[listItemStyle]` |\n| `` | Relative-time date pill. `[timestamp]`, `[pattern]`, `[dateStyle]` |\n| `` | Icon button. `[iconURL]`, `[buttonStyle]`, `(click)` |\n| `` | Loading spinner. `[iconURL]`, `[loaderStyle]` |\n| `` | Confirm/cancel dialog. `[title]`, `[messageText]`, `[onConfirm]`, `[onCancel]` |\n| `` | Full emoji picker. `[onEmojiClick]` |\n\n> **Note:** Atom components (`cometchat-avatar`, `cometchat-status-indicator`, `cometchat-badge`) are LitElement web components — they are NOT Angular standalone modules. Do NOT import them in `@NgModule` imports. They are registered automatically via `CUSTOM_ELEMENTS_SCHEMA` and used directly in templates.\n\n> **Not in public exports:** `` and `` are used internally by the message list. Do not instantiate them directly.\n\n---\n\n## 6b. Text formatters\n\nThese are not components — they are formatter classes that customize how text renders in message bubbles. Import from `@cometchat/uikit-shared` and pass via `[textFormatters]` on both `` and ``.\n\n| Class | Purpose |\n|---|---|\n| `CometChatTextFormatter` | Abstract base class — extend to build custom formatters |\n| `CometChatMentionsFormatter` | Renders @mentions with styling + suggestion popover |\n| `CometChatUrlsFormatter` | Auto-links URLs. Requires regex patterns in constructor |\n\n```typescript\nimport {\n CometChatMentionsFormatter,\n CometChatUrlsFormatter,\n} from \"@cometchat/uikit-shared\";\n\ntextFormatters = [\n new CometChatMentionsFormatter(),\n new CometChatUrlsFormatter([\n /https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/gi,\n ]),\n];\n```\n\n**Always pass the same array to both list and composer** — if they differ, sent and received messages render differently.\n\n> **Note:** `CometChatMarkdownFormatter`, `CometChatRichTextFormatter`, and `CometChatTextHighlightFormatter` are React v6 UIKit only — they do not exist in the Angular v4 UIKit. To add custom text rendering patterns in Angular, extend `CometChatTextFormatter` directly (see `cometchat-angular-customization` § Tier 3a).\n\n---\n\n## 7. Infrastructure (static classes + event bus)\n\n### CometChatUIKit\n\nStatic class — init + login + logout.\n\n| Method | Purpose |\n|---|---|\n| `CometChatUIKit.init(settings)` | Initialize. Must resolve before any component renders. |\n| `CometChatUIKit.login({ uid })` | Log in (dev mode). Takes an object. |\n| `CometChatUIKit.login({ authToken })` | Log in with a server-minted token (production). |\n| `CometChatUIKit.getLoggedinUser()` | Returns current `CometChat.User` or `null` (Promise). |\n| `CometChatUIKit.logout()` | Log out + clear session. |\n\n### CometChatConversationEvents / CometChatMessageEvents / CometChatGroupEvents / CometChatUserEvents\n\nAngular event bus — RxJS `Subject`-based. Subscribe in `ngOnInit`, unsubscribe in `ngOnDestroy`.\n\n```typescript\nimport { Subscription } from \"rxjs\";\nimport { CometChatConversationEvents } from \"@cometchat/chat-uikit-angular\";\n\nexport class MyComponent implements OnInit, OnDestroy {\n private ccConversationDeleted!: Subscription;\n\n ngOnInit(): void {\n this.ccConversationDeleted =\n CometChatConversationEvents.ccConversationDeleted.subscribe(\n (conversation: CometChat.Conversation) => {\n // handle deletion\n }\n );\n }\n\n ngOnDestroy(): void {\n this.ccConversationDeleted?.unsubscribe();\n }\n}\n```\n\nAvailable event streams:\n- `CometChatConversationEvents`: `ccConversationDeleted`, `ccUpdateConversation`\n- `CometChatMessageEvents`: `ccMessageSent`, `ccMessageEdited`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`\n- `CometChatGroupEvents`: `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged`\n- `CometChatUserEvents`: `ccUserBlocked`, `ccUserUnblocked`\n\n**Always unsubscribe in `ngOnDestroy`.** Angular components can be destroyed and re-created on navigation; leaked subscriptions cause duplicate event handling.\n\n### CometChatThemeService\n\nInjected service for palette control. See `cometchat-angular-core` § 6 and `cometchat-angular-theming`.\n\n---\n\n## 8. Style objects\n\nEach component accepts a typed style object. Import from `@cometchat/uikit-shared` or `@cometchat/chat-uikit-angular`.\n\n```typescript\nimport {\n ConversationsStyle,\n MessagesStyle,\n MessageListStyle,\n MessageComposerStyle,\n MessageHeaderStyle,\n UsersStyle,\n GroupsStyle,\n GroupMembersStyle,\n AvatarStyle,\n BadgeStyle,\n StatusIndicatorStyle,\n ListItemStyle,\n DateStyle,\n BackdropStyle,\n ConfirmDialogStyle,\n LoaderStyle,\n CallLogsStyle,\n} from \"@cometchat/uikit-shared\";\n// or from \"@cometchat/chat-uikit-angular\" — both re-export the same types\n```\n\nCommon style properties (all optional):\n\n```typescript\nconst conversationsStyle = new ConversationsStyle({\n width: \"100%\",\n height: \"100%\",\n border: \"1px solid #e8e8e8\",\n borderRadius: \"8px\",\n background: \"#ffffff\",\n titleTextFont: \"600 18px Inter\",\n titleTextColor: \"#141414\",\n lastMessageTextColor: \"#727272\",\n onlineStatusColor: \"#09C26F\",\n});\n```\n\n---\n\n## 9. ng-template slot views\n\nCustom views are passed as Angular `TemplateRef` via `ng-template`. The template receives the entity as an implicit context variable.\n\n```html\n\n\n\n\n
\n {{ conversation.getConversationWith().getName() }}\n
\n\n```\n\n```typescript\n// In the component class\nimport { ViewChild, TemplateRef } from \"@angular/core\";\n\n@Component({ /* ... */ })\nexport class AppComponent {\n @ViewChild(\"customListItem\") customListItem!: TemplateRef;\n}\n```\n\nCommon slot inputs per component:\n\n| Component | Slot inputs |\n|---|---|\n| `` | `[listItemView]`, `[menu]`, `[loadingStateView]`, `[errorStateView]`, `[emptyStateView]` |\n| `` | `[menu]`, `[subtitleView]` |\n| `` | `[emptyStateView]`, `[errorStateView]`, `[loadingStateView]` |\n| `` | `[auxilaryButtonView]`, `[headerView]`, `[sendButtonView]` |\n| `` | `[listItemView]`, `[menu]`, `[loadingStateView]`, `[errorStateView]`, `[emptyStateView]` |\n| `` | `[listItemView]`, `[menu]`, `[loadingStateView]`, `[errorStateView]`, `[emptyStateView]` |\n\n---\n\n## 10. Request builders\n\nPass request builders to filter what data loads. Import builder classes from `@cometchat/chat-sdk-javascript`.\n\n```typescript\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\n// Filter conversations\nconversationsRequestBuilder = new CometChat.ConversationsRequestBuilder()\n .setLimit(20)\n .setConversationType(CometChat.RECEIVER_TYPE.USER);\n\n// Filter users\nusersRequestBuilder = new CometChat.UsersRequestBuilder()\n .setLimit(30)\n .setStatus(\"online\");\n\n// Filter messages\nmessagesRequestBuilder = new CometChat.MessagesRequestBuilder()\n .setUID(this.selectedUser.getUid())\n .setLimit(30)\n .setCategories([\"message\"]);\n```\n\n---\n\n## 11. Threading — wiring `[onThreadRepliesClick]`\n\nThe Angular v4 UIKit does **not** have a `[hideReplyInThreadOption]` input. The \"Reply in Thread\" option in the message action menu is always present when threads are supported by the kit.\n\nTo wire a thread panel, pass `[onThreadRepliesClick]` as an **Input callback** (square brackets) on ``:\n\n```html\n\n```\n\n```typescript\n// The callback receives { message, view } — extract the message:\nopenThread = (payload: any): void => {\n const msg = payload?.message ?? payload;\n this.threadMessage = msg;\n this.showThreadPanel = true;\n};\n```\n\nThen render the thread panel using `` or a manual scoped list + composer with `[parentMessageId]`.\n\n---\n\n## 12. Common prop-finding recipe\n\nWhen a user's request isn't obviously covered, check in this order:\n\n1. **Named component in this catalog fits?** (\"show call history\" → ``)\n2. **A `[hide*]` / visibility input?** (\"disable reactions\" → `[disableReactions]=\"true\"`, \"hide receipt\" → `[hideReceipt]=\"true\"`)\n3. **A `[*View]` / `[*Template]` slot?** (\"customize the header title\" → `[subtitleView]=\"myTemplate\"`)\n4. **A `[*RequestBuilder]`?** (\"filter conversations\" → `[conversationsRequestBuilder]`)\n5. **`[textFormatters]` + `[templates]`** for message-rendering customization\n6. **`CometChatConversationEvents` / `CometChatMessageEvents`** for cross-component communication\n7. **Only then** escalate to `cometchat-angular-customization` § Tier 4 (DataSource decorators)\n\n---\n\n## Skill routing reference\n\n| Skill | When to route |\n|---|---|\n| `cometchat-angular-core` | Always read first — init, login, module setup |\n| `cometchat-angular-components` | This skill — any time you write `` HTML |\n| `cometchat-angular-placement` | Deciding WHERE components go (route / sidebar / modal / tab) |\n| `cometchat-angular-customization` | `[textFormatters]`, `[templates]`, custom slot views, event bus |\n| `cometchat-angular-features` | Adding calls, extensions, AI |\n| `cometchat-angular-theming` | `[*Style]` not enough — need app-wide color / typography changes |\n| `cometchat-angular-production` | `login({ authToken })` setup |\n| `cometchat-angular-troubleshooting` | `` renders nothing or throws at runtime |","tags":["cometchat","angular","components","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-angular-components","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-components","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (27,326 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:47.834Z","embedding":null,"createdAt":"2026-05-07T13:05:07.140Z","updatedAt":"2026-05-18T19:04:47.834Z","lastSeenAt":"2026-05-18T19:04:47.834Z","tsv":"'/gi':1799 '/https':1777 '09c26f':2097 '1':242,243,370,1784,1791,2344 '10':2182 '100':1385,1426,2077,2079 '1024px':166,210,400,412,451 '11':2232 '12':2325 '141414':2093 '18px':2090 '1px':2081 '2':508,2354 '20':553,2209 '256':1785 '3':151,385,405,681,2367 '30':2218,2229 '3a':1855 '4':114,996,2378,2410 '5':1271,2384 '5b':1339 '5c':1510 '6':1580,1792,2014,2392 '600':2089 '6b':1709 '7':1856,2400 '727272':2095 '8':2020 '8px':2085 '9':1783,1790,1798,2098 'a-za-z0':1779,1786,1794 'abstract':1741 'accept':2025 'across':357 'action':885,2254 'activ':221 'activeconvers':587 'actual':68 'ad':2470 'add':1434,1443,1839 'ai':2473 'almost':139 'alway':31,1800,1982,2257,2424 'angular':3,10,17,43,52,88,122,127,296,471,876,1274,1282,1487,1516,1576,1669,1835,1845,1852,1915,1986,2012,2018,2109,2237,2407,2422,2433,2445,2457,2468,2476,2490,2497 'angular/core':540,2142 'anoth':1468 'anywher':207 'app':1083,2483 'app-wid':2482 'app.module.ts':475 'appcompon':548,2146 'appli':289,352,860,991 'array':1804 'atom':1581,1650 'attach':907 'attachmentopt':926,927,945 'authorit':73 'authtoken':1889,2493 'auto':1758 'auto-link':1757 'automat':1354,1682 'auxbuttontempl':933 'auxilari':951 'auxilarybuttonview':932,946,2169 'auxiliari':953 'avail':414,1957 'avatar':1601,1654 'avatarstyl':593,624,648,741,1133,1179,1606,2045 'away':1245 'b':1793 'backdropstyl':2050 'background':2086 'badg':1609,1661 'badgestyl':595,1611,2046 'ban':1451,1459 'bar':1330 'base':1742,1920 'bind':19,54,80,287,294 'block':1387,1428,1587 'block/unblock':1358,1506 'border':2080 'borderradius':2084 'bracket':344,350,851,857,982,988,1054,1060,1113,1119,1168,1267,1270,1560,1563,2278 'broken':193,426 'bubbl':1727 'build':1327,1371,1586,1746 'builder':25,63,2184,2187,2194 'built':1286 'bus':1234,1861,1917,2465 'button':760,1037,1631 'buttonstyl':1633 'bypass':1332 'call':263,759,997,1000,1013,1023,1036,1078,1096,1097,1122,1140,1145,1146,1171,1183,1190,1195,1220,1226,1242,1251,1256,2352,2471 'callback':267,307,336,822,830,843,896,958,961,964,974,1049,1068,1071,1074,1108,1125,1128,1131,1165,1174,1177,1205,1264,1557,2276,2291 'callbuttonsstyl':1075 'calllogsstyl':2053 'callsettingsbuild':1207 'case':142 'catalog':6,121,2349 'caus':1999 'ccconversationdelet':1943,1961 'ccgroupcreat':1970 'ccgroupdelet':1971 'ccgroupleft':1972 'ccgroupmemberad':1977 'ccgroupmemberban':1975 'ccgroupmemberjoin':1976 'ccgroupmemberkick':1974 'ccgroupmemberscopechang':1973 'cclivereact':1968 'ccmessagedelet':1966 'ccmessageedit':1965 'ccmessageread':1967 'ccmessages':1964 'ccownershipchang':1978 'ccupdateconvers':1962 'ccuserblock':1980 'ccuserunblock':1981 'chang':2487 'chat':229,251,318,529,1414,1504 'check':2340 'circular':1600 'class':547,1719,1738,1743,1859,1864,1937,2137,2145,2195 'claud':39 'clear':1909 'click':214,1634 'closecontact':1423 'closethread':1552 'color':2485 'cometchat':2,9,35,87,292,359,470,520,542,601,630,653,695,719,783,915,1035,1094,1143,1193,1255,1297,1302,1307,1377,1418,1442,1458,1472,1542,1575,1653,1656,1660,1851,2011,2017,2127,2200,2282,2406,2421,2432,2441,2444,2456,2467,2475,2489,2496,2499 'cometchat-add-memb':1441 'cometchat-angular-compon':1,2431 'cometchat-angular-cor':86,2010,2420 'cometchat-angular-custom':1850,2405,2455 'cometchat-angular-featur':2466 'cometchat-angular-plac':469,1574,2443 'cometchat-angular-product':2488 'cometchat-angular-them':2016,2474 'cometchat-angular-troubleshoot':2495 'cometchat-avatar':1652 'cometchat-badg':1659 'cometchat-banned-memb':1457 'cometchat-call-button':1034 'cometchat-call-log':1254 'cometchat-contact':1417 'cometchat-convers':519,1296,2126 'cometchat-detail':1376 'cometchat-group':629,1306 'cometchat-group-memb':652 'cometchat-incoming-cal':1093 'cometchat-messag':694 'cometchat-message-compos':914 'cometchat-message-head':718 'cometchat-message-list':782,2281 'cometchat-ongoing-cal':1192 'cometchat-outgoing-cal':1142 'cometchat-status-ind':1655 'cometchat-threaded-messag':1541 'cometchat-transfer-ownership':1471 'cometchat-us':600,1301 'cometchat.cometchatexception':571 'cometchat.conversation':270,556,1950 'cometchat.conversationsrequestbuilder':551,2207 'cometchat.group':670 'cometchat.messagesrequestbuilder':2225 'cometchat.receiver_type.user':2211 'cometchat.user':1902 'cometchat.usersrequestbuilder':2216 'cometchat/calls-sdk-javascript':1003 'cometchat/chat-sdk-javascript':544,2197,2202 'cometchat/chat-uikit-angular':113,479,1240,1935,2034,2058 'cometchat/uikit-shared':1730,1771,2032,2055 'cometchataddmemb':1433 'cometchatbannedmemb':1447 'cometchatblockedus':1490 'cometchatcallbutton':1020 'cometchatcallev':1238 'cometchatcallevents.cccallended':1230 'cometchatcallevents.cccallended.subscribe':1241 'cometchatcalllog':1249 'cometchatcompactmessagecompos':1494 'cometchatcontact':1394 'cometchatconvers':510 'cometchatconversationev':1911,1933,1960,2393 'cometchatconversationevents.ccconversationdeleted.subscribe':1948 'cometchatconversationswithmessag':373,477,482 'cometchatcreategroup':1477 'cometchatdetail':1345 'cometchatgroup':627 'cometchatgroupev':1913,1969 'cometchatgroupmemb':650 'cometchatgroupswithmessag':500 'cometchatincomingcal':1076 'cometchatmarkdownformatt':1820 'cometchatmentionsformatt':1749,1768,1774 'cometchatmessag':683 'cometchatmessagecompos':903 'cometchatmessageev':1912,1963,2394 'cometchatmessagehead':716 'cometchatmessagelist':770 'cometchatnewchat':1489 'cometchatongoingcal':1180 'cometchatoutgoingcal':1134 'cometchatrichtextformatt':1821 'cometchatsearchbar':1491 'cometchattextformatt':1740,1847 'cometchattexthighlightformatt':1823 'cometchatthemeservic':2003 'cometchatthreadhead':1492,1513 'cometchattransferownership':1463 'cometchatuikit':1862 'cometchatuikit.getloggedinuser':1899 'cometchatuikit.init':1870 'cometchatuikit.login':1879,1888 'cometchatuikit.logout':1906 'cometchaturlsformatt':1756,1769,1776 'cometchatus':598 'cometchatuserev':1914,1979 'cometchatuserswithmessag':492 'common':2066,2151,2326 'communic':2399 'compon':4,5,30,41,77,107,125,129,144,262,286,293,360,372,390,538,545,692,1001,1214,1290,1324,1367,1525,1597,1651,1665,1715,1877,1987,2024,2136,2143,2155,2156,2346,2398,2434,2449 'componentstyl':327 'compos':689,917,942,1536,1570,1809,2322 'composerconfig':704 'composit':29,147,171,371,402,437,684,1524,1585 'confirm/cancel':1639 'confirmdialogstyl':2051 'console.error':573 'const':558,561,2072,2302 'constructor':1765 'contact':236,1341,1419 'contain':180,447 'context':2123 'control':227,892,1186,2008 'convent':288 'convers':154,217,394,408,515,521,555,1298,1401,1949,2128,2204,2382 'conversation.getconversationtype':563 'conversation.getconversationwith':560,2131 'conversationsconfigur':491 'conversationsrequestbuild':522,523,549,577,2205,2383 'conversationsstyl':329,592,2037,2073,2075 'conversationswithmessagesstyl':489 'core':89,2013,2423 'count':1608,1610 'cover':138,2339 'creat':1480,1994 'critic':331 'cross':2397 'cross-compon':2396 'current':1901 'custom':95,133,197,484,1328,1372,1584,1596,1684,1721,1747,1840,1853,2104,2372,2391,2408,2458,2461 'customitem':324 'customlistitem':2130,2148,2149 'd':1155 'data':258,300,2191 'datasourc':2411 'date':1625 'datestyl':596,1629,2049 'decid':2447 'decor':2412 'delet':888,1952 'destroy':1990 'detail':156,176,185,383,410,417,430,1340,1347,1373,1378 'detect':1223 'dev':1883 'dialog':203,441,1478,1640 'differ':1812,1818 'direct':245,1689,1708,1848 'disabl':882,2359 'disablement':586,817,965 'disablereact':792,815,880,2361 'disablesoundformessag':816,966 'disabletyp':585,744 'disableuserspres':534,584,680,743 'display':1386,1427 'doc':108 'docs/ui-kit/angular':111 'docs/ui-kit/angular/components-overview':104 'dot':1613 'drawer':183,205,442 'drop':1025 'duplic':2000 'e.g':234 'e8e8e8':2083 'edit':887 'element':96,135,485,1685 'embed':228 'emoji':1646 'empti':188,420 'emptystateview':831,2163,2166,2176,2181 'end':1158,1189,1221,1227,1243 'end-cal':1188 'enough':2480 'entiti':275,559,2119 'error':570,574 'errorstateview':832,2162,2167,2175,2180 'escal':2403 'etc':369 'event':21,56,339,348,846,855,977,986,1058,1117,1233,1860,1916,1958,2001,2464 'everi':40,140,291,354 'exampl':298 'exist':69,751,873,1211,1438,1832 'export':47,116,546,1279,1695,1936,2062,2144 'expos':1519 'extend':1744,1846 'extens':2472 'extract':273,2295 'fallback':1605 'fals':531,533,535,608,610,727,791,793,1300,1305,1310,1320 'fastest':375 'featur':2469 'feed':773 'ffffff':2087 'filter':2189,2203,2212,2221,2381 'find':2329 'first':2426 'fit':2350 'flow':259 'formatt':1711,1718,1748 'full':161,226,379,1645 'full-pag':160 'fulli':1565 'getmemberopt':663 'getnam':2132 'go':2450 'granular':225 'ground':102 'group':272,282,503,517,631,654,656,666,709,734,806,938,1065,1308,1343,1353,1359,1362,1381,1392,1396,1409,1439,1445,1455,1461,1465,1475,1483,1549 'groupmemberrequestbuild':658,672 'groupmembersstyl':677,2044 'groupsrequestbuild':632,633,638 'groupsstyl':647,2043 'handl':391,774,1349,1951,2002 'handleaccept':1100 'handleback':725 'handleclos':1149 'handlecontactclick':1421 'handleconvclick':525,554 'handledeclin':1102 'handleerror':527,569,801,931,1199 'handlegroupclick':635 'handlememberclick':661 'handler':215,825 'handlerfn':310 'handlesend':929 'handleuserclick':606 'handlevideocal':1043 'handlevoicecal':1041 'hard':1311 'header':687,721,763,1029,1512,1530,2374 'headerconfig':700 'headerview':954,2170 'height':1384,1425,2078 'hide':758,901,2356,2363 'hidebackbutton':726,736 'hidedatesepar':819 'hidedeletemessageopt':869 'hideeditmessageopt':868 'hideerror':818 'hidereact':866 'hidereceipt':530,582,790,814,865,2365 'hidereplyinthreadopt':864,2244 'hidereplyopt':867 'hidesearch':609,619,643,678,1293,1299,1304,1309,1319 'hidesepar':532,583 'hidestatus':607,618 'hidetranslatemessageopt':870 'hidevideocallbutton':746 'hidevoicecallbutton':748 'highlight':1338 'histori':1252,2353 'horizont':168 'html':14,36,50,134,473,499,507,518,599,628,651,693,717,781,913,1033,1092,1141,1191,1253,1295,1375,1416,1440,1456,1470,1484,1540,2125,2280,2442 'icon':1630 'iconurl':1632,1637 'imag':1602 'implement':1939 'implicit':2122 'import':94,476,481,537,541,837,968,1009,1237,1674,1678,1728,1767,1928,1932,2030,2036,2138,2193,2199 'in-cal':1181 'inbox':233,380 'includ':1527 'incom':1077,1095 'incomingcal':1098 'incomingcallstyl':1132 'indic':1658 'individu':900 'infrastructur':1857 'init':1865,2427 'init/login':99 'initi':1024,1138,1604,1872 'inject':2004 'input':18,53,266,299,306,335,488,576,612,637,665,706,731,754,803,821,829,842,902,906,935,957,960,963,973,1048,1062,1067,1070,1073,1107,1121,1124,1127,1130,1150,1164,1170,1173,1176,1201,1204,1263,1294,1389,1430,1556,2153,2158,2245,2275,2358 'insid':438,1589 'instal':1006 'instanc':671 'instanti':1706 'instead':1235 'integr':376 'inter':2091 'intern':397,1699 'invent':76 'isn':1015,2336 'key':487,575,611,636,664,705,730,802,934,1061,1120,1169,1200,1388,1429 'kit':12,45,124,1518,2265 'lastmessagetextcolor':2094 'layout':153,191,198,387,407,424,467 'lead':1618 'leak':1997 'least':450 'leav':1361 'link':1759 'list':261,496,504,509,512,688,785,1289,1323,1405,1448,1533,1569,1703,1807,2284,2321 'listconfig':702 'listitemstyl':597,626,649,1621,2048 'listitemview':323,588,620,644,739,2129,2159,2172,2177 'litel':1663 'liter':314 'live':755 'load':32,1635,2192 'loaderstyl':1638,2052 'loadingstateview':833,2161,2168,2174,2179 'log':1257,1881,1890,1907 'login':1866,2428,2492 'logout':1867 'look':81,192,425 'manag':1344 'manual':1566,2319 'media':780 'member':655,1360,1435,1444,1452,1460,1469 'memberrequestbuild':659 'mention':777,908,1751 'menu':589,621,645,728,737,768,1031,2160,2164,2173,2178,2255 'menutempl':729 'messag':155,224,285,381,396,409,497,505,682,685,696,720,772,784,884,916,923,1028,1521,1532,1544,1702,1726,1816,2222,2231,2253,2283,2293,2297,2305,2389 'message-rend':2388 'messagecomposerconfigur':703,714 'messagecomposerstyl':967,2040 'messageheaderconfigur':699,712 'messageheaderstyl':740,2041 'messageinformationconfigur':836 'messagelistconfigur':701,713 'messageliststyl':834,2039 'messagesconfigur':490 'messagesrequestbuild':788,789,811,2223 'messagesstyl':715,2038 'messagetempl':797 'messagetext':1642 'method':1868 'mint':1896 'modal':181,202,238,440,466,2453 'mode':1884 'modul':93,1283,1671,2429 'msg':2303,2308 'must':1873 'mute':1187 'mycompon':1938 'myfn':342,347,849,854,980,985,1052,1057,1111,1116 'mystyl':330 'mytempl':2377 'name':16,78,1151,1603,2345 'narrow':179,208,460 'navig':564,1244,1996 'need':2481 'never':75,345,852,983,1055,1114,1313 'new':550,1400,1413,1482,1503,1773,1775,2074,2206,2215,2224 'ng':58,1591,2100,2113 'ng-templat':57,1590,2099,2112 'ngmodul':480,1677 'ngondestroy':1926,1953,1985 'ngoninit':1923,1945 'note':745,863,910,947,1649,1819 'noth':2501 'notif':1079 'null':1904 'object':27,66,326,1887,2022,2029 'obvious':2338 'omit':765 'onaccept':365,1099,1110,1115,1123 'onback':674,724,735 'oncallend':1208 'oncancel':1644 'onclos':675,1393,1422,1432,1551,1553 'oncloseclick':1148,1153,1160,1172 'onconfirm':1643 'onconvclick':312 'ondeclin':366,1101,1126 'ondestroy':1941 'one':158,389,691,710,949,1366,1538 'onemojiclick':1648 'onerror':362,526,580,616,641,800,828,862,930,959,993,1072,1129,1175,1198,1203 'ongo':1194 'ongoingcallstyl':1206 'oninit':1940 'onitemclick':265,311,341,346,361,524,578,605,614,634,639,660,673,1258,1260,1420,1431 'onlin':2220 'online/offline':1612 'onlinestatuscolor':2096 'onselect':363,579,615,640 'onsendbuttonclick':364,928,956,979,984 'ontextchang':962,995 'onthreadrepliesclick':798,820,824,827,848,853,2235,2272,2287 'onvideocallclick':368,1042,1069 'onvoicecallclick':367,1040,1051,1056,1066 'onxxx':309 'open':240 'opencalldetail':1259 'openthread':799,2288,2298 'option':590,622,646,662,676,886,895,2070,2250 'order':2343 'outgo':1144 'outgoingcal':1147 'outgoingcallstyl':1178 'output':20,55,338,845,976,1218 'overlay':1415 'overrid':1594 'ownership':1466,1474 'page':109,162,250 'pagin':1336 'palett':2007 'pane':196,457,465 'panel':152,177,252,384,386,406,418,1348,1374,2270,2315 'parentmessag':1545 'parentmessageid':807,939,1572,2324 'pass':277,668,1732,1801,2107,2185,2271 'pattern':137,143,458,1579,1628,1763,1843 'payload':2299,2304,2306 'per':106,249,2154 'per-compon':105 'per-pag':248 'picker':912,1397,1647 'pill':1626 'pin':253 'placeholdertext':920,943 'placement':164,206,461,472,1577,2446 'popov':1755 'prefer':1368 'prerequisit':101 'present':2258 'primit':1582 'privat':1942 'product':1898,2491 'profil':1356 'project':1019 'promis':1905 'prop':333,356,840,971,1046,1105,2328 'prop-find':2327 'properti':2068 'propnam':302,315 'public':1694 'purpos':37,1599,1739,1869 'quickest':148 're':1993,2061 're-creat':1992 're-export':2060 'react':1497,1825 'reaction':775,883,2360 'reactionsconfigur':835 'read':85,2425 'receipt':776,2364 'receiv':1815,2117,2292 'recent':514 'recip':2330 'refer':74,2415 'regex':1762 'regist':1681 'relat':1623 'relative-tim':1622 'render':131,149,377,403,493,501,1080,1402,1724,1750,1817,1842,1878,2312,2390,2500 'repli':810,2247 'request':24,62,2183,2186,2335 'requestbuild':2380 'requir':399,667,711,1002,1761 'reserv':172 'resolv':1874 'return':1900 'rich':904 'ring':1135 'roll':1314 'room':173 'root':1084 'round':349,856,987,1059,1118,1269,1562 'rout':163,392,1091,2414,2419,2451 'row':1617 'rule':1312 'runtim':2505 'rxjs':1918,1931 'schema':97,483,486,1686 'scope':1531,1535,2320 'screen':1136 'scrollabl':511,771,1250 'sdk':999,1014,1334 'search':1272,1284,1317,1329 'searchabl':1404 'see':462,1573,1849,2009 'selectedgroup':568,657,1382,1446,1462,1476,1550 'selectedus':305,567,698,723,787,919,1039,1380,1548,2286 'selectionmod':679 'selector':15,51,1598 'seller':237 'sendbuttonview':955,2171 'sent':1813 'separ':998,1568 'server':1895 'server-mint':1894 'servic':2005 'session':1910 'session.sessionid':1197 'sessionid':1196,1202 'set':219,566,1871 'setcategori':2230 'setconversationtyp':2210 'setlimit':552,2208,2217,2228 'setstatus':2219 'setuid':2226 'setup':2430,2494 'show':1355,2351 'side':199,201 'sidebar':182,204,444,2452 'simpli':764 'skill':92,2413,2416,2436 'skill-cometchat-angular-components' 'slot':22,60,186,320,769,1032,1593,2102,2152,2157,2371,2462 'slotnam':321 'solid':2082 'source-cometchat' 'space':169 'specif':256 'spell':948 'spinner':1636 'squar':343,850,981,1053,1112,1167,1266,1559,2277 'standalon':128,1281,1493,1670 'standard':1616 'start':1399 'state':1248 'static':1858,1863 'status':1357,1614,1657 'statusindicatorstyl':594,625,742,1615,2047 'stay':187,419 'sticker':911 'stitch':1567 'stream':1959 'string':313,316 'style':26,65,325,1383,1424,1753,2021,2028,2067,2478 'styleinst':328 'subject':1919 'subscrib':1228,1921 'subscript':1929,1944,1998 'subtitleview':738,2165,2376 'suggest':1754 'support':2262 'surfac':230 'syntax':297 'tab':2454 'tag':159,1539 'take':1885 'teach':38 'templat':23,59,319,796,813,898,1592,1691,2101,2114,2116,2370,2386,2460 'templateref':322,2110,2140,2150 'text':905,1710,1723,1841 'textformatt':591,794,795,812,924,925,944,1734,1772,2385,2459 'theme':2019,2477 'this.ccconversationdeleted':1947,1955 'this.selecteduser.getuid':2227 'this.showthreadpanel':2309 'this.threadmessage':2307 'thread':244,382,498,506,778,809,890,941,1509,1511,1520,1529,1543,1578,2233,2249,2260,2269,2314 'threadparentmessag':1546 'three':136 'throw':2503 'tier':1854,2409 'tile':1185 'time':1624,2438 'timestamp':1627 'titl':317,528,581,617,642,1641,2375 'title/subtitle':1619 'titletextcolor':2092 'titletextfont':2088 'token':1897 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'trail':1620 'transfer':1464,1473 'translat':889 'troubleshoot':2498 'true':2310,2362,2366 'truth':103 'two':195,456,464 'two-pan':194,455,463 'type':295,562,921,2027,2065 'typescript':474,536,1236,1766,1927,2035,2071,2133,2198,2289 'typographi':2486 'ui':11,44,123,1184,1517 'uid':1880 'uikit':878,1276,1499,1827,1837,2239 'unban':1450 'unifi':1346 'unless':445 'unread':1607 'unsubscrib':1924,1956,1983 'updat':1247 'url':1760 'use':119,141,145,340,435,453,823,847,879,978,1050,1109,1166,1265,1318,1410,1501,1558,1588,1688,1698,2316 'user':271,280,304,495,516,602,697,707,722,732,786,804,918,936,1038,1063,1303,1351,1379,1390,1395,1407,1547,2213,2285,2333 'user/group':222,257 'usersrequestbuild':603,604,613,2214 'usersstyl':623,2042 'v4':13,46,877,1275,1488,1836,2238 'v6':1498,1826 'valu':303 'variabl':2124 'via':893,1291,1514,1522,1683,1733,2111 'video':1022 'view':61,686,2103,2105,2294,2369,2463 'viewchild':2139,2147 'visibl':422,1088,2357 'voic':909,1021 'void':557,572,1946,1954,2301 'web':1664 'whitespac':428 'wide':452,2484 'width':398,415,2076 'wire':212,2234,2267 'write':34,2440 'www':1778 'x':115 'z0':1782,1789,1797 'za':1781,1788,1796","prices":[{"id":"19383618-deed-4a7b-8aa0-1a04877c2836","listingId":"4405c59b-6719-424a-bb2a-62717b4797af","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:07.140Z"}],"sources":[{"listingId":"4405c59b-6719-424a-bb2a-62717b4797af","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-angular-components","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-components","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:07.140Z","lastSeenAt":"2026-05-18T19:04:47.834Z"}],"details":{"listingId":"4405c59b-6719-424a-bb2a-62717b4797af","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-angular-components","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"74458b08eebd77e5370dfbe54b43b7d0c5b169c7","skill_md_path":"skills/cometchat-angular-components/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-components"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-angular-components","license":"MIT","description":"Component catalog for the CometChat Angular UI Kit v4 — HTML selector names, Angular Input bindings, Output events, slot templates, request builders, style objects, and composite components. Always loaded before writing HTML.","compatibility":"Angular >=12 <=15; @cometchat/chat-uikit-angular ^4; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-components"},"updatedAt":"2026-05-18T19:04:47.834Z"}}