Skip to main content

​
Overview

The CometChatIncomingCall component renders an incoming call notification card when a user receives a voice or video call. It displays the caller’s name, avatar, and call type icon using a CometChatListItem, along with Accept and Decline buttons. After accepting, it automatically renders the ongoing call screen.

​
Key Features

  • Caller Information: Displays caller name, avatar, and call type (audio/video) icon
  • Accept & Decline: Built-in buttons for accepting or declining the call
  • Ringtone Support: Plays an incoming call ringtone with custom sound support
  • Ongoing Call Transition: Automatically shows the ongoing call screen after accepting
  • Custom Handlers: Override default accept/decline behavior with custom callbacks
  • Template Overrides: Replace any visual section with custom templates
  • Focus Management: Dialog focus trap with Escape key to decline
  • Global Config Priority: Supports a three-tier priority system (Input > GlobalConfig > Default)
Live Preview — default incoming call preview. Open in Storybook ↗

​
Basic Usage

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatIncomingCallComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-incoming-call-demo',
  standalone: true,
  imports: [CometChatIncomingCallComponent],
  template: `
    <cometchat-incoming-call
      [call]="incomingCall"
      (callAccepted)="onCallAccepted($event)"
      (callDeclined)="onCallDeclined($event)"
    ></cometchat-incoming-call>
  `
})
export class IncomingCallDemoComponent {
  incomingCall!: CometChat.Call;

  onCallAccepted(call: CometChat.Call): void {
    console.log('Call accepted:', call.getSessionId());
  }

  onCallDeclined(call: CometChat.Call): void {
    console.log('Call declined:', call.getSessionId());
  }
}

​
Properties

PropertyTypeDefaultDescription
callCometChat.Call | nullnullThe incoming call object. Overrides service state when provided.
disableSoundForCallsbooleanfalseDisables the incoming call ringtone when true. Supports global config override.
customSoundForCallsstring''Custom sound URL for the incoming call ringtone. Supports global config override.
onAccept((call: CometChat.Call) => void) | nullnullCustom accept handler. Overrides default SDK CometChat.acceptCall().
onDecline((call: CometChat.Call) => void) | nullnullCustom decline handler. Overrides default SDK CometChat.rejectCall().
onError((error: CometChat.CometChatException) => void) | nullnullError callback invoked for any error during sound, accept, or decline.
itemViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullReplaces the entire ListItem with a custom template.
titleViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullReplaces the default caller name title in the ListItem.
subtitleViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullReplaces the default call type icon and “Incoming Call” subtitle.
leadingViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullCustom template for the leading position of the ListItem.
trailingViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullReplaces the default caller avatar in the trailing position.
acceptButtonViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullReplaces the default Accept button.
declineButtonViewTemplateRef<{ $implicit: IncomingCallTemplateContext }> | nullnullReplaces the default Decline button.

​
Events

EventPayload TypeDescription
callAcceptedCometChat.CallEmitted when the user accepts the incoming call.
callDeclinedCometChat.CallEmitted when the user declines the incoming call.
errorCometChat.CometChatExceptionEmitted on any error during sound playback, accept, or decline.

​
Customization

​
CSS Variable Overrides

cometchat-incoming-call {
  --cometchat-primary-color: #6852D6;
  --cometchat-background-color-01: #ffffff;
  --cometchat-text-color-primary: #141414;
  --cometchat-success-color: #09C26F;
  --cometchat-error-color: #F44336;
}

​
Custom Templates

<cometchat-incoming-call
  [call]="incomingCall"
  [subtitleView]="customSubtitle"
  [acceptButtonView]="customAccept"
>
  <ng-template #customSubtitle let-ctx>
    <span>{{ ctx.callType === 'video' ? '📹 Video Call' : '📞 Audio Call' }}</span>
  </ng-template>

  <ng-template #customAccept let-ctx>
    <button class="my-accept-btn" (click)="acceptCall()">
      Accept {{ ctx.callerName }}'s call
    </button>
  </ng-template>
</cometchat-incoming-call>

​
Accessibility

​
Keyboard Navigation

KeyAction
EnterActivate the focused button (Accept or Decline)
SpaceActivate the focused button (Accept or Decline)
TabMove focus between Accept and Decline buttons
EscapeDecline the incoming call

​
ARIA Attributes

  • role="alertdialog" on the notification container
  • aria-labelledby references the caller name heading
  • Focus is trapped within the dialog while visible
  • Initial focus is set to the Accept button

​
Screen Reader Support

  • Incoming call is announced via a live region with caller name and call type
  • Call ended is announced when the call terminates