`,
})
export class ChatLayoutComponent {
selectedUser: CometChat.User | undefined;
selectedGroup: CometChat.Group | undefined;
activeConversation: CometChat.Conversation | undefined;
handleConvClick = (conversation: CometChat.Conversation): void => {
this.activeConversation = conversation;
const entity = conversation.getConversationWith();
if (entity instanceof CometChat.User) {
this.selectedUser = entity;
this.selectedGroup = undefined;
} else {
this.selectedGroup = entity as CometChat.Group;
this.selectedUser = undefined;
}
};
}
```
### Sidebar layout notes
- The sidebar container needs `overflow: hidden` — `` fills 100% of its parent.
- The message area needs `flex: 1; overflow: hidden` so the list fills the remaining space.
- Pass `[activeConversation]` to `` to highlight the selected row.
- `[hideBackButton]="true"` on the header since there's no navigation to go back to.
---
## 3. Modal/Dialog placement
For occasional chat that doesn't belong in the primary navigation. Use Angular Material `MatDialog` or Angular CDK overlay.
### ⚠️ Critical — never use `` in a modal
The composite renders a 3-panel layout (Conversations + Messages + Details) and needs **≥ 1024px** of horizontal space. Modals are typically 480–960px wide; the Details panel ends up as empty whitespace and the layout looks broken (one column unused, X close button orphaned). Use the **Two-pane** pattern (Pattern A0) for inbox-in-modal, or the **Granular** 1:1 pattern (Pattern A) for "Contact seller"-style direct chat.
### Pattern A0 — Inbox in modal (Two-pane: Conversations + Messages)
For "click → open a modal showing the user's inbox + selected thread" (Slack-in-a-popup style).
```typescript
// inbox-modal.component.ts
import { Component, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatConversations,
CometChatMessages,
} from "@cometchat/chat-uikit-angular";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
@Component({
selector: "app-inbox-modal",
standalone: true,
imports: [CommonModule, CometChatConversations, CometChatMessages],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
Select a conversation
`,
})
export class InboxModalComponent {
activeConversation: CometChat.Conversation | null = null;
activeUser: CometChat.User | null = null;
activeGroup: CometChat.Group | null = null;
constructor(public dialogRef: MatDialogRef) {}
onConversationClick = (conv: CometChat.Conversation): void => {
this.activeConversation = conv;
const target = conv.getConversationWith();
if (target instanceof CometChat.User) {
this.activeUser = target;
this.activeGroup = null;
} else {
this.activeGroup = target as CometChat.Group;
this.activeUser = null;
}
};
}
```
```typescript
// Trigger:
this.dialog.open(InboxModalComponent, { panelClass: "inbox-dialog" });
```
Why this works in modal sizing where the composite doesn't:
- **No third panel** — Conversations (left) + Messages (right) consumes the entire dialog width.
- **Explicit flex sizing** — Conversations is fixed-width (`flex: 0 0 320px`), Messages takes the rest (`flex: 1 1 auto`). No empty whitespace.
- **Empty state handled** — `*ngIf` shows a "Select a conversation" placeholder until the user clicks one.
### Pattern A — Angular Material MatDialog (recommended)
```typescript
// chat-dialog.component.ts
import { Component, Inject } from "@angular/core";
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
} from "@cometchat/chat-uikit-angular";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@Component({
selector: "app-chat-dialog",
standalone: true,
imports: [CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
`,
})
export class ChatDialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: { user: CometChat.User }
) {}
close = (): void => this.dialogRef.close();
}
```
```typescript
// Trigger from any component:
import { MatDialog } from "@angular/material/dialog";
@Component({ /* ... */ })
export class ProductComponent {
constructor(private dialog: MatDialog) {}
openChat(sellerUid: string): void {
CometChat.getUser(sellerUid).then((user) => {
this.dialog.open(ChatDialogComponent, {
data: { user },
panelClass: "chat-dialog",
disableClose: false,
});
});
}
}
```
### Pattern B — Angular CDK Overlay (no Material dependency)
```typescript
import { Overlay, OverlayRef } from "@angular/cdk/overlay";
import { ComponentPortal } from "@angular/cdk/portal";
@Component({ /* ... */ })
export class TriggerComponent {
private overlayRef: OverlayRef | null = null;
constructor(private overlay: Overlay) {}
openChat(): void {
this.overlayRef = this.overlay.create({
hasBackdrop: true,
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
});
const portal = new ComponentPortal(ChatDialogComponent);
this.overlayRef.attach(portal);
this.overlayRef.backdropClick().subscribe(() => this.overlayRef?.dispose());
}
}
```
---
## 4. Tab-based placement
For full-featured messengers with distinct entry points per content type. Use Angular Material `MatTabGroup` or a custom tab bar.
```typescript
// chat-tabs.component.ts
import { Component } from "@angular/core";
import { MatTabsModule } from "@angular/material/tabs";
import {
CometChatConversations,
CometChatUsers,
CometChatGroups,
CometChatCallLogs,
} from "@cometchat/chat-uikit-angular";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@Component({
selector: "app-chat-tabs",
standalone: true,
imports: [MatTabsModule, CometChatConversations, CometChatUsers, CometChatGroups, CometChatCallLogs],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
`,
})
export class ChatTabsComponent {
handleConvClick = (conversation: CometChat.Conversation): void => { /* navigate */ };
handleUserClick = (user: CometChat.User): void => { /* navigate */ };
handleGroupClick = (group: CometChat.Group): void => { /* navigate */ };
}
```
### Tab wiring notes
- `animationDuration="0ms"` prevents the tab content from fading in/out, which can cause CometChat components to re-initialize.
- Each tab's content needs an explicit height — `calc(100vh - 48px)` subtracts the tab bar height (48px for Material default).
- For the **Calls** tab, `` only works when `@cometchat/calls-sdk-javascript` is installed. Omit the Calls tab if the project doesn't use calling.
---
## 5. Embedded placement
Chat inside an existing page section, not its own route.
```typescript
// product-detail.component.ts
@Component({
selector: "app-product-detail",
standalone: true,
imports: [
CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
Chat with seller
Loading chat...
`,
})
export class ProductDetailComponent implements OnInit {
seller: CometChat.User | undefined;
ngOnInit(): void {
CometChat.getUser(this.product.sellerUid).then((user) => (this.seller = user));
}
}
```
### Embedded gotchas
- **Fixed height required.** CometChat components fill 100% of their parent. Without a bounded height (`height: 480px` or `flex: 1` inside a flex container), the list collapses to zero height and renders empty.
- **Overflow hidden on the container.** The inner components have their own scroll — the outer container must not scroll over them.
- Usually the embedded pattern is the wrong default — prefer a Modal trigger from a button on the page, which gives users a dedicated surface for chatting.
---
## Hard rules
These apply to ALL placement patterns.
1. **NEVER modify the project's existing router without reading it first.** Understand what's there before adding routes or outlets. Don't replace a user's navigation structure unless they explicitly chose "demo mode."
2. **ALWAYS give CometChat containers a bounded height.** Components fill 100% of their parent. If the parent has no bounded height, components collapse to zero height and look empty. Use `height: 100vh`, `height: calc(100vh - Npx)`, or `flex: 1` inside a flex column.
3. **Pass either `[user]` or `[group]`, never both.** Passing both causes runtime errors. Branch in the template based on which one is set.
4. **Resolve user / group before rendering.** The `[user]` and `[group]` inputs expect `CometChat.User` and `CometChat.Group` instances — not bare UID strings. Fetch via `CometChat.getUser(uid)` / `CometChat.getGroup(guid)` in `ngOnInit` and gate the render on the resolved object with `*ngIf`.
5. **Wire `[onThreadRepliesClick]` if you want threads**, or leave it unwired to keep the thread option hidden. The `[onThreadRepliesClick]` input is an `@Input()` callback — use `[onThreadRepliesClick]="myFn"` (square brackets). See `cometchat-angular-components` § 11 for the full threading pattern.
6. **For modal placements, set an explicit width and height on the dialog container.** Angular Material dialogs don't constrain their content by default — without explicit dimensions, CometChat components may render at 0px.
6a. **Never use `` (or `` / ``) inside a modal, dialog, drawer, or sidebar.** These composites render a 3-panel layout (List + Messages + Details) and need ≥ 1024px of horizontal space. In a 480–960px modal, the Details panel ends up as empty whitespace and the layout looks broken. Use the Two-pane pattern (`` + ``, see § 3 Pattern A0) for inbox-in-modal, or the Granular pattern (`` + `-message-list>` + `-message-composer>`, see § 3 Pattern A) for 1:1 chat.
7. **For sidebar placements, use `overflow: hidden` on both the sidebar and message area containers.** CometChat components have internal scroll; the outer containers must not add a second scroll layer.
8. **Never animate a CometChat-containing container with CSS `transform`.** `transform` creates a new stacking context, which reparents `position: fixed` overlays (emoji picker, action sheet, reactions popover) and makes them misalign. Animate `left` / `right` / `top` / `bottom` offsets instead.
---
## Skill routing reference
| Skill | When to route |
|---|---|
| `cometchat-angular-core` | Always first — init, login, module setup |
| `cometchat-angular-components` | For component prop details — always |
| `cometchat-angular-placement` | This skill — picking + wiring a placement |
| `cometchat-angular-patterns` | Angular-specific routing, lazy loading, guards |
| `cometchat-angular-theming` | Customize colors / typography / dark mode |
| `cometchat-angular-features` | Calls, extensions, AI — the "add a feature" flow |
| `cometchat-angular-customization` | Custom slot views, text formatters, events |
| `cometchat-angular-production` | Server-side auth tokens |
| `cometchat-angular-troubleshooting` | Blank chat / height issues / dialog sizing |