Block/Unblock Users

Implement block and unblock user functionality in CometChat Angular UIKit with composer state management.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-angular
Key methods	CometChat.blockUsers(), CometChat.unblockUsers()
Events	CometChatUserEvents.ccUserBlocked, CometChatUserEvents.ccUserUnblocked
UI helpers	cometchat-confirm-dialog
Init	CometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
Sample app	GitHub
Related	All Guides

Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.

Before starting, complete the Integration Guide.

---

Components

Component / Method	Role
CometChat.blockUsers()	SDK method to block specific users
CometChat.unblockUsers()	SDK method to unblock previously blocked users
CometChatUserEvents.ccUserBlocked	RxJS subject fired when a user is blocked
CometChatUserEvents.ccUserUnblocked	RxJS subject fired when a user is unblocked
cometchat-confirm-dialog	Confirmation dialog for block/unblock actions

---

Implementation Steps

1. Block User

Call CometChat.blockUsers() with the target UID. On success, update the local user object with setBlockedByMe(true) and emit ccUserBlocked so all subscribed components react to the change.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatUserEvents,
  CometChatLocalize
} from '@cometchat/chat-uikit-angular';

async blockUser(user: CometChat.User): Promise<void> {
  const uid = user.getUid();

  try {
    await CometChat.blockUsers([uid]);
    user.setBlockedByMe(true);
    CometChatUserEvents.ccUserBlocked.next(user);
    this.toastMessage = CometChatLocalize.getLocalizedString('blocked_successfully');
    this.showToast = true;
  } catch (error) {
    console.error('Blocking user failed:', error);
  }
}

---

2. Unblock User

Call CometChat.unblockUsers() with the target UID. On success, update the local user object and emit ccUserUnblocked to restore the composer.

unblockUser(user: CometChat.User): void {
  const uid = user.getUid();

  CometChat.unblockUsers([uid])
    .then(() => {
      user.setBlockedByMe(false);
      CometChatUserEvents.ccUserUnblocked.next(user);
    })
    .catch((error) => {
      console.error('Unblocking user failed:', error);
    });
}

---

3. Confirmation Dialog

Show a confirmation dialog before blocking. This prevents accidental blocks.

@if (showBlockUserDialog) {
  <div class="cometchat-block-user-dialog__backdrop">
    <cometchat-confirm-dialog
      [title]="'block_contact' | translate"
      [messageText]="'confirm_block_contact' | translate"
      [confirmButtonText]="'user_details_block' | translate"
      (cancelClick)="showBlockUserDialog = false"
      (confirmClick)="onBlockConfirmed()">
    </cometchat-confirm-dialog>
  </div>
}

showBlockUserDialog = false;

promptBlockUser(): void {
  this.showBlockUserDialog = true;
}

async onBlockConfirmed(): Promise<void> {
  this.showBlockUserDialog = false;
  await this.blockUser(this.selectedUser!);
}

---

4. Composer Blocked State

When a user is blocked, the composer is replaced with an unblock prompt.

@if (showComposer) {
  <cometchat-message-composer
    [user]="selectedUser">
  </cometchat-message-composer>
} @else {
  <div class="message-composer-blocked" (click)="unblockUser(selectedUser!)">
    <div class="message-composer-blocked__text">
      {{ 'cannot_send_to_blocked_user' | translate }}
      <a>{{ 'click_to_unblock' | translate }}</a>
    </div>
  </div>
}

---

5. Event Listeners

Subscribe to block/unblock events to update the UI in real time. Clean up subscriptions in ngOnDestroy.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { CometChatUserEvents } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-messages',
  standalone: true,
  imports: [],
  template: `<!-- see steps above -->`
})
export class ChatMessagesComponent implements OnInit, OnDestroy {
  showComposer = true;
  private subscriptions: Subscription[] = [];

  ngOnInit(): void {
    this.subscriptions.push(
      CometChatUserEvents.ccUserBlocked.subscribe((user) => {
        if (user.getBlockedByMe()) {
          this.showComposer = false;
        }
      })
    );

    this.subscriptions.push(
      CometChatUserEvents.ccUserUnblocked.subscribe((user) => {
        if (!user.getBlockedByMe()) {
          this.showComposer = true;
        }
      })
    );
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

---

Feature Matrix

Feature	Component / Method	Description
Block user	CometChat.blockUsers([uid])	Blocks a user by UID
Unblock user	CometChat.unblockUsers([uid])	Unblocks a previously blocked user
Check blocked status	user.getBlockedByMe()	Returns whether the user is blocked
Block confirmation	cometchat-confirm-dialog	Prevents accidental blocks
Blocked composer state	showComposer flag	Hides composer and shows unblock prompt
Block event	CometChatUserEvents.ccUserBlocked	RxJS subject for block notifications
Unblock event	CometChatUserEvents.ccUserUnblocked	RxJS subject for unblock notifications
Subscription cleanup	ngOnDestroy	Unsubscribes from all event listeners

---

Next Steps

Users

Display and manage user lists.

Message Composer

Customize the message input component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.