Cometchat Angular V5 Calls

Ground truth: calling UI ships INSIDE @cometchat/chat-uikit-angular@5 — there is no separate calls-UI package — but the WebRTC engine is a SEPARATE, NOT-bundled peer: @cometchat/calls-sdk-javascript@^5.0.3 (major 5, distinct from the chat SDK's v4). Every CometChat* symbol below exists in the angular-v5 catalog. Exhaustive inputs/outputs and advanced call surfaces are FETCHED, not baked — {DOCS_BASE}/ui-kit/angular/call-features.md, the per-component pages (/components/cometchat-incoming-call, -call-buttons, -call-logs, -outgoing-call), and /guides/call-log-details; base + paths in cometchat-angular-v5-core/references/docs-map.md. APPEND to the user's app — additive wiring only (RULES.md).

Companion skills (read first)

• cometchat-angular-v5-core — install, credentials, init→login→render. Assumed.
• cometchat-angular-v5-placement — where the incoming-call listener mounts.

Use this skill when

Adding voice/video calling, or diagnosing calls that never ring.

Prerequisites & install — calls needs a second package

npm install @cometchat/calls-sdk-javascript@^5

It is an optional peer of the UI Kit (^5.0.3), so it is not installed by default. Without it the call components are inert and CometChatUIKit.isCallingEnabled() returns false.

Calling must also be enabled for the app in the dashboard. Code alone is not enough.

⚠️ Installing the package is NOT what turns calling on

core inits with initFromSettings, and on that path the kit derives calling from the settings object:

// verified in the shipped 5.1.0 bundle
const callingEnabled = !!settings.uiKit?.['callsSDK'];
if (callingEnabled) builder.setCallingEnabled(true);

So you must declare a uiKit.callsSDK block or calling stays off no matter what you installed:

CometChatUIKit.initFromSettings({
  appId, region,
  credentials: { authKey },
  chatSDK: { presenceSubscription: { type: 'ALL_USERS' } },
  uiKit: { callsSDK: {} },          // ← REQUIRED for calling on the initFromSettings path
});

Symptom if you miss it: <cometchat-call-buttons> renders as a zero-size empty element and the message header shows no call buttons. Nothing errors, nothing logs, and the package is installed — so it reads as a layout or CSS bug. CometChatUIKit.isCallingEnabled() returns false; check that first.

The docs' builder path uses .setCallingEnabled(true) on UIKitSettingsBuilder instead. Both are correct for their own init — see cometchat-angular-v5-core/references/lifecycle.md. Do not mix them.

The four things, in order

1. Install the calls SDK (above).
2. Mount <cometchat-incoming-call> at APP ROOT — not in the chat page.
3. Add call buttons — the message header renders them by default.
4. Optionally add call logs.

Step 2 is the one that goes wrong.

Incoming calls — app root, not the chat route

<!-- app.component.html -->
<cometchat-incoming-call
  (callAccepted)="onAccepted($event)"
  (callDeclined)="onDeclined($event)"
  (error)="onError($event)">
</cometchat-incoming-call>
<router-outlet></router-outlet>

Mounted inside the chat page it unmounts the moment the user navigates elsewhere, so calls stop ringing anywhere except that one route. It looks like the calls SDK is broken; it is a placement bug.

Remember CometChatIncomingCallComponent in the root component's imports: [].

Call buttons

<cometchat-message-header> renders voice and video buttons itself — check the running app before adding your own. Suppress with [hideVoiceCallButton]="true" / [hideVideoCallButton]="true".

The default is not hardcoded: the header reads COMETCHAT_GLOBAL_CONFIG and tracks whether you set the input explicitly, so an app-wide config can hide the buttons even though nothing on the component says so. If they are missing, check the global config before concluding the header does not render them — and if they are present, do not add <cometchat-call-buttons> alongside or you get two sets.

Standalone, elsewhere in your UI:

<cometchat-call-buttons [user]="activeUser()" [group]="activeGroup()" (error)="onError($event)"></cometchat-call-buttons>

Both call components must be in the consuming component's imports: [] — omitted, they render nothing and never ring. Mount <cometchat-incoming-call> at the app root, not inside a route, or it stops ringing the moment the user navigates away:

import { Component, inject, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  ChatStateService,
  CometChatCallButtonsComponent,
  CometChatIncomingCallComponent,
  CometChatUIKitCalls,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, CometChatCallButtonsComponent, CometChatIncomingCallComponent],
  template: `
    <cometchat-incoming-call (callAccepted)="onAccepted($event)"></cometchat-incoming-call>
    <cometchat-call-buttons [user]="activeUser()" [group]="activeGroup()"></cometchat-call-buttons>
  `,
})
export class AppRootComponent {
  private readonly chatState = inject(ChatStateService);
  readonly activeUser = computed(() => this.chatState.activeUser() ?? undefined);
  readonly activeGroup = computed(() => this.chatState.activeGroup() ?? undefined);
  // CometChatUIKitCalls is the calls-SDK accessor the kit exposes; it is null until the
  // SDK has loaded, so never touch it during construction.
  readonly calls = CometChatUIKitCalls;
  onAccepted(_call: unknown) { /* route to your ongoing-call screen */ }
}

Ongoing and outgoing

The kit drives these once a call is accepted. Outputs, if you need to react:

<cometchat-ongoing-call> takes [sessionID] and optionally [callSettingsBuilder] / [isAudioOnly]. Do not build your own call screen — WebRTC state, permissions and teardown are handled.