Overview
The CometChatOutgoingCall component renders a full-screen outgoing call overlay when a user initiates a voice or video call. It displays the receiver’s name, a “Calling…” subtitle, the receiver’s avatar, and a cancel button. The component plays an outgoing ringtone and provides focus-trapped dialog behavior.
Key Features
- Receiver Information: Displays receiver name and avatar for both user and group calls
- Ringtone Support: Plays an outgoing call ringtone with custom sound support
- Cancel Action: Built-in cancel button to abort the outgoing call
- Template Overrides: Replace title, subtitle, avatar, or cancel button with custom templates
- Focus Management: Dialog focus trap with Escape key to cancel
- Global Config Priority: Supports a three-tier priority system (Input > GlobalConfig > Default)
Basic Usage
When <cometchat-outgoing-call> is used standalone, it is purely presentational. Its default cancel action only stops the local ringtone and emits (callCanceled) — it does not call the Chat SDK cancellation API. Your (callCanceled) handler must cancel the outgoing call itself via the Chat SDK (see the example below).When the component is rendered inside <cometchat-call-buttons>, the buttons component performs the SDK cancellation for you, so you should not cancel the call again in your own handler.
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatOutgoingCallComponent } from '@cometchat/chat-uikit-angular';
@Component({
selector: 'app-outgoing-call-demo',
standalone: true,
imports: [CometChatOutgoingCallComponent],
template: `
<cometchat-outgoing-call
[call]="outgoingCall"
(callCanceled)="onCallCanceled()"
></cometchat-outgoing-call>
`
})
export class OutgoingCallDemoComponent {
outgoingCall!: CometChat.Call;
// Standalone usage: the component does not cancel the call for you.
// Your handler must reject/cancel the call through the Chat SDK.
async onCallCanceled(): Promise<void> {
const sessionId = this.outgoingCall?.getSessionId();
if (sessionId) {
await CometChat.rejectCall(sessionId, CometChat.CALL_STATUS.CANCELLED);
}
}
}
Properties
| Property | Type | Default | Description |
|---|
call | CometChat.Call | null | null | The outgoing call object. Overrides service state when provided. |
disableSoundForCalls | boolean | false | Disables the outgoing call ringtone when true. Supports global config override. |
customSoundForCalls | string | '' | Custom sound URL for the outgoing call ringtone. Supports global config override. |
onError | ((error: CometChat.CometChatException) => void) | null | null | Error callback invoked for any error during sound or cancel. |
titleView | TemplateRef<{ $implicit: OutgoingCallTemplateContext }> | null | null | Replaces the default receiver name title. |
subtitleView | TemplateRef<{ $implicit: OutgoingCallTemplateContext }> | null | null | Replaces the default “Calling…” subtitle. |
avatarView | TemplateRef<{ $implicit: OutgoingCallTemplateContext }> | null | null | Replaces the default CometChatAvatar. |
cancelButtonView | TemplateRef<{ $implicit: OutgoingCallTemplateContext }> | null | null | Replaces the default cancel button. |
Events
| Event | Payload Type | Description |
|---|
callCanceled | void | Emitted when the user cancels the outgoing call. |
error | CometChat.CometChatException | Emitted on any error during sound playback or cancellation. |
Customization
CSS Variable Overrides
cometchat-outgoing-call {
--cometchat-primary-color: #6852D6;
--cometchat-background-color-01: #ffffff;
--cometchat-text-color-primary: #141414;
--cometchat-text-color-secondary: #727272;
--cometchat-error-color: #F44336;
}
Custom Templates
<cometchat-outgoing-call
[call]="outgoingCall"
[subtitleView]="customSubtitle"
[cancelButtonView]="customCancel"
>
<ng-template #customSubtitle let-ctx>
<span>Ringing {{ ctx.receiverName }}...</span>
</ng-template>
<ng-template #customCancel let-ctx>
<button class="my-cancel-btn" (click)="cancelCall()">
Hang Up
</button>
</ng-template>
</cometchat-outgoing-call>
Accessibility
Keyboard Navigation
| Key | Action |
|---|
Enter | Activate the cancel button |
Space | Activate the cancel button |
Escape | Cancel the outgoing call |
Tab | Move focus within the dialog |
ARIA Attributes
role="dialog" on the overlay containeraria-labelledby references the receiver name heading- Focus is trapped within the dialog while visible
- Initial focus is set to the cancel button
Screen Reader Support
- Outgoing call is announced via a live region with the receiver’s name
- Call ended is announced when the call terminates
