Skip to main content

​
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

PropertyTypeDefaultDescription
callCometChat.Call | nullnullThe outgoing call object. Overrides service state when provided.
disableSoundForCallsbooleanfalseDisables the outgoing call ringtone when true. Supports global config override.
customSoundForCallsstring''Custom sound URL for the outgoing call ringtone. Supports global config override.
onError((error: CometChat.CometChatException) => void) | nullnullError callback invoked for any error during sound or cancel.
titleViewTemplateRef<{ $implicit: OutgoingCallTemplateContext }> | nullnullReplaces the default receiver name title.
subtitleViewTemplateRef<{ $implicit: OutgoingCallTemplateContext }> | nullnullReplaces the default “Calling…” subtitle.
avatarViewTemplateRef<{ $implicit: OutgoingCallTemplateContext }> | nullnullReplaces the default CometChatAvatar.
cancelButtonViewTemplateRef<{ $implicit: OutgoingCallTemplateContext }> | nullnullReplaces the default cancel button.

​
Events

EventPayload TypeDescription
callCanceledvoidEmitted when the user cancels the outgoing call.
errorCometChat.CometChatExceptionEmitted 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

KeyAction
EnterActivate the cancel button
SpaceActivate the cancel button
EscapeCancel the outgoing call
TabMove 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

​
Screen Reader Support

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