Outgoing Call - CometChat Docs

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)

Live Preview — default outgoing call preview. Open in Storybook ↗

Basic Usage

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;

  onCallCanceled(): void {
    console.log('Outgoing call canceled');
  }
}

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

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="alertdialog" on the overlay container
aria-labelledby references the receiver name heading
Focus is trapped within the dialog while visible
Initial focus is set to the cancel button

Outgoing call is announced via a live region with the receiver’s name
Call ended is announced when the call terminates

CometChatCallButtons — Parent component that triggers the outgoing call overlay
CometChatOngoingCall — Displayed after the call is accepted
CometChatIncomingCall — Handles incoming call notifications

​Overview

​Key Features

​Basic Usage

​Properties

​Events

​Customization

​CSS Variable Overrides

​Custom Templates

​Accessibility

​Keyboard Navigation

​ARIA Attributes

​Screen Reader Support

​Related Components

Overview

Key Features

Basic Usage

Properties

Events

Customization

CSS Variable Overrides

Custom Templates

Accessibility

Keyboard Navigation

ARIA Attributes

Screen Reader Support

Related Components