Cometchat Angular V5 Components

Ground truth: the existence oracle is the angular-v5 catalog (references/catalog.md, generated from the installed 5.1.0 kit). Not listed = not importable. Exact inputs/outputs/view slots are FETCHED from each component's .md twin via cometchat-angular-v5-core/references/docs-map.md — every page opens with an AI Integration Quick Reference; read that first. Never answer an input or output from memory or from the type declarations.

Companion skills (read first)

• cometchat-angular-v5-core — install, credentials, init→login→render, the golden-path surface. This skill ASSUMES it and never restates it.

Use this skill when

Picking which component to use, overriding part of one, or discovering that the thing asked for has no component at all.

Naming — three different strings per component

CometChatConversationsComponent (import) · <cometchat-conversations> (template) · "Conversations" (docs title). The bare CometChatConversations is internal-only and not importable — 109 such names exist. The AI-assistant exports are the sole suffix exception (CometChatAIAssistantChat).

Output names carry NO prefix

Angular outputs are plain: itemClick, select, error, closeClick, selectionChange. There is no cc prefix — that is React's convention. Binding (ccConversationClicked) silently never fires.

⚠️ An output that does not exist fails the SAME silent way — Angular treats an unknown event on a component as a plain DOM listener, so (closeClick) on <cometchat-message-header> compiles clean and never fires. closeClick is real on <cometchat-thread-header> but NOT on the message header (verified vs compiled 5.1.0). Use backClick there.

Anything not listed: fetch the component's docs page (cometchat-angular-v5-core/references/docs-map.md). Do not guess an output name.

Component catalog (BAKED closed list)

Full per-component inputs live in the docs — this is the "which one do I reach for" map. Complete list: references/catalog.md.

Lists <cometchat-conversations> · <cometchat-users> · <cometchat-groups> · <cometchat-group-members> Message pane <cometchat-message-header> · <cometchat-message-list> · <cometchat-message-composer> · <cometchat-thread-header> Bubbles text · image · video · audio · file · card · poll · sticker · action · delete · call · collaborative-document · collaborative-whiteboard (all rendered BY the message list — see below) Calls <cometchat-call-buttons> · <cometchat-incoming-call> · <cometchat-outgoing-call> · <cometchat-ongoing-call> · <cometchat-call-logs> Search <cometchat-search> · <cometchat-search-bar> · <cometchat-search-conversations-list> · <cometchat-search-messages-list> AI CometChatAIAssistantChat · <cometchat-smart-replies> · <cometchat-conversation-starter> · <cometchat-conversation-summary> Reactions <cometchat-reactions> · <cometchat-reaction-list> · <cometchat-reaction-info> · <cometchat-emoji-keyboard> Support <cometchat-error-boundary> · <cometchat-notification-feed> · <cometchat-notification-badge> · <cometchat-change-scope> · <cometchat-flag-message-dialog> · <cometchat-media-recorder>

Do NOT hand-roll what the list already renders

Message bubbles, receipts, reaction pickers, typing indicators, attachment previews and the context menu are rendered by <cometchat-message-list> when the corresponding feature is on. Rebuilding them by hand loses realtime updates and every future fix. If an affordance looks broken it is nearly always a missing @Input() or an unsized container, not a missing component. <cometchat-conversations> / -users / -groups / -call-logs / -search / -message-list specifically all rely on an internal height: 100% down to their own scroll region — none sizes itself. Placed in a flex column without flex: 1; min-height: 0 (the .cc-fill class, cometchat-angular-v5-placement/references/core-surface.md), a list doesn't scroll: it grows past its container and gets silently clipped.

Building your OWN chrome? The kit exports the atoms too

The rule above covers what <cometchat-message-list> renders for you. A second case is your own UI — a signed-in user bar, a profile header, a custom row — where the kit still ships the piece you are about to rebuild:

htmlCopy code
<!-- ✅ themed, falls back to initials when there is no picture, follows light/dark -->
<cometchat-avatar [image]="user?.getAvatar()" [name]="user?.getName()"></cometchat-avatar>

<!-- ❌ hand-rolled: needs your own fallback URL, ignores the theme, drifts from the kit -->
<img [src]="user?.getAvatar() || 'https://…/astronaut.png'" class="my-avatar" />

A hand-rolled <img> is the common one. It forces you to invent a placeholder, it does not render initials when the user has no picture, and it ignores every avatar token in the theme. Before styling a presentational element yourself, check this table — and remember these are standalone components, so each one you use goes in the consuming component's imports: [].

Customizing part of a component — view slots

Override a region with a <ng-template> bound to a *View input. This is Angular's content projection; it replaces React's render props.

tsCopy code
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { CometChatConversationsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-convo-list',
  standalone: true,
  imports: [CometChatConversationsComponent],
  templateUrl: './convo-list.component.html',
})
export class ConvoListComponent {
  @ViewChild('customItem', { static: true }) customItem!: TemplateRef<unknown>;

  // A trigger must have a handler in the SAME class, or the template fails to compile
  // (TS2339). `(itemClick)` emits a Conversation — discriminate it before binding the
  // subject to [user] or [group] (see cometchat-angular-v5-placement).
  open(conversation: CometChat.Conversation) { /* select the conversation */ }
}

htmlCopy code
<ng-template #customItem let-conversation>
  <div class="my-row">{{ conversation?.getConversationId() }}</div>
</ng-template>

<cometchat-conversations [itemView]="customItem" (itemClick)="open($event)"></cometchat-conversations>

Slots available per component (verified against the kit):

Override the smallest slot that does the job — replacing itemView when you only wanted a different subtitle loses selection, presence and receipts.

Surfaces with NO kit component (host-composed)

Requested often, and there is nothing to import. Build these yourself against the SDK — see references/host-composed.md.

• Create a group — no component. Offer all three types: public, private, and password-protected.
• Banned members — no component; <cometchat-group-members> covers view/kick/ban/scope but the banned LIST comes from the SDK.
• Login / user picker — no component; app-owned.

Common pitfalls

1. Component not in imports: [] → renders nothing, silently. Every component, every consuming component.
2. Guessing an output name (ccItemClicked) → binding never fires and Angular does not warn.
3. Replacing itemView for a cosmetic tweak → loses built-in selection/presence/receipts.
4. Mixing [user] and [group] across header/list/composer → one conversation's header over another's messages.
5. Hand-rolling bubbles → loses realtime updates.

Verify it works

The overridden region renders your template · the rest of the component is unchanged · clicks still fire · realtime updates still arrive · nothing collapsed to zero height.