Skip to main content
Events provide decoupled communication between UIKit components using a publish/subscribe event bus pattern. Components emit events in response to user interactions or state changes, allowing other parts of your application to react without direct component references. In Angular, you subscribe to these events using RxJS observables and manage subscriptions through component lifecycle hooks.

​
CometChatConversationEvents

CometChatConversationEvents emits events when the logged-in user acts on a conversation object.
Event NameDescription
ccConversationDeletedTriggered when the user successfully deletes a conversation.
ccUpdateConversationTriggered to update a conversation in the conversation list. Takes a Conversation object to update.

​
CometChatUserEvents

CometChatUserEvents emits events when the logged-in user acts on another user object.
Event NameDescription
ccUserBlockedTriggered when the user successfully blocks another user.
ccUserUnblockedTriggered when the user successfully unblocks another user.

​
CometChatGroupEvents

CometChatGroupEvents emits events when the logged-in user acts on a group object.
Event NameDescription
ccGroupCreatedTriggered when the user creates a group successfully.
ccGroupDeletedTriggered when the group member deletes the group successfully.
ccGroupLeftTriggered when the group member leaves the group successfully.
ccGroupMemberScopeChangedTriggered when the group member’s scope is updated successfully.
ccGroupMemberKickedTriggered when a group member is kicked.
ccGroupMemberBannedTriggered when a group member is banned.
ccGroupMemberUnbannedTriggered when a group member is un-banned.
ccGroupMemberJoinedTriggered when a user joins the group.
ccGroupMemberAddedTriggered when a user is added to the group.
ccOwnershipChangedTriggered when the group ownership is assigned to another group member.

​
CometChatMessageEvents

CometChatMessageEvents emits events when the logged-in user acts on a message object. This category includes both UIKit-level events and CometChat SDK listener events.

​
UIKit Events

Event NameDescription
ccMessageSentTriggered when the sent message is in transit and also when it is received by the receiver.
ccMessageEditedTriggered when the user successfully edits a message.
ccReplyToMessageTriggered when the user successfully replies to a message.
ccMessageDeletedTriggered when the user successfully deletes a message.
ccMessageReadTriggered when the sent message is read by the receiver.
ccLiveReactionTriggered when the user sends a live reaction.

​
SDK Listener Events

Event NameDescription
onTextMessageReceivedEmitted when the CometChat SDK listener receives a text message.
onMediaMessageReceivedEmitted when the CometChat SDK listener receives a media message.
onCustomMessageReceivedEmitted when the CometChat SDK listener receives a custom message.
onTypingStartedEmitted when the CometChat SDK listener indicates that a user has started typing.
onTypingEndedEmitted when the CometChat SDK listener indicates that a user has stopped typing.
onMessagesDeliveredEmitted when the CometChat SDK listener indicates that messages have been delivered.
onMessagesReadEmitted when the CometChat SDK listener indicates that messages have been read.
onMessageEditedEmitted when the CometChat SDK listener indicates that a message has been edited.
onMessageDeletedEmitted when the CometChat SDK listener indicates that a message has been deleted.
onTransientMessageReceivedEmitted when the CometChat SDK listener receives a transient message.

​
CometChatCallEvents

CometChatCallEvents emits events when the logged-in user acts on a call object.
Event NameDescription
ccOutgoingCallTriggered when the user initiates a voice/video call.
ccCallAcceptedTriggered when the initiated call is accepted by the receiver.
ccCallRejectedTriggered when the initiated call is rejected by the receiver.
ccCallEndedTriggered when the initiated call successfully ends.

​
UI Events

UI events are triggered when a user interacts with UIKit elements such as buttons, menus, or input fields.
Event NameDescription
ccActiveChatChangedTriggered when the user navigates to a particular chat window.

​
Usage

Subscribe to events in ngOnInit and unsubscribe in ngOnDestroy to prevent memory leaks. 
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-chat',
  standalone: true,
  template: `<!-- your template -->`
})
export class ChatComponent implements OnInit, OnDestroy {
  private messageSubscription?: Subscription;

  ngOnInit(): void {
    this.messageSubscription = CometChatMessageEvents.ccMessageSent.subscribe(
      (message) => {
        console.log('Message sent:', message);
      }
    );
  }

  ngOnDestroy(): void {
    this.messageSubscription?.unsubscribe();
  }
}
When subscribing to multiple events, consider using a Subscription container to manage all subscriptions together.
import { Component, OnInit, OnDestroy } from '@angular/core';
import {
  CometChatMessageEvents,
  CometChatConversationEvents,
  CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-chat-listener',
  standalone: true,
  template: `<!-- your template -->`
})
export class ChatListenerComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit(): void {
    this.subscriptions.add(
      CometChatMessageEvents.ccMessageSent.subscribe((message) => {
        console.log('Message sent:', message);
      })
    );

    this.subscriptions.add(
      CometChatConversationEvents.ccConversationDeleted.subscribe((conversation) => {
        console.log('Conversation deleted:', conversation);
      })
    );

    this.subscriptions.add(
      CometChatGroupEvents.ccGroupMemberAdded.subscribe((data) => {
        console.log('Member added:', data);
      })
    );
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }
}