Skip to main content
FieldValue
Package@cometchat/chat-uikit-angular
Key classCometChatMentionsFormatter (extends CometChatTextFormatter)
Required setupCometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
PurposeFormat @mentions with styled tokens, suggestion list, and click handling for users and group members
RelatedCustom Text Formatter | All Guides
CometChatMentionsFormatter extends CometChatTextFormatter to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.
CapabilityDescription
Mention formattingAuto-formats <@uid:...> placeholders into styled tokens
Custom stylesColors, fonts, and backgrounds for mention text
User and group mentionsWorks with both individual users and group members
Suggestion listGenerates mention candidates from user input
Click handlingListener interface for tap/click on rendered mentions

​
Usage

​
1. Initialize the formatter

import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-angular";

const mentionsFormatter = new CometChatMentionsFormatter();
mentionsFormatter.setCometChatUserGroupMembers(userList);

​
2. Format a message

Provide the raw message string containing mention placeholders, then apply the formatter: 
const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
// Render formattedMessage in your message component
The output contains HTML with styled mentions ready for rendering.

​
3. Pass to components

Use the textFormatters input on cometchat-message-list, cometchat-message-composer, or cometchat-conversations. 
import { Component, OnInit } from "@angular/core";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  CometChatMentionsFormatter,
} from "@cometchat/chat-uikit-angular";

@Component({
  selector: "app-mentions-demo",
  standalone: true,
  imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
  template: `
    <cometchat-message-list
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-list>
    <cometchat-message-composer
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-composer>
  `,
})
export class MentionsDemoComponent implements OnInit {
  chatUser: CometChat.User | undefined;
  textFormatters = [new CometChatMentionsFormatter()];

  ngOnInit() {
    CometChat.getUser("uid").then((user) => {
      this.chatUser = user;
    });
  }
}
The CometChatMentionsFormatter is included by default in the message composer and message list. You only need to pass it explicitly if you want to customize its behavior or combine it with other formatters.

​
Customization

​
Custom mention styles

Override the default mention token styles by setting CSS properties: 
const mentionsFormatter = new CometChatMentionsFormatter();
mentionsFormatter.setMentionStyle({
  color: "#7c4dff",
  backgroundColor: "#ede7f6",
  fontWeight: "600",
  borderRadius: "4px",
  padding: "0 4px",
});

​
Custom click handler

Handle clicks on mention tokens to navigate to user profiles or show details: 
mentionsFormatter.setOnMentionClick((user: CometChat.User) => {
  console.log("Mention clicked:", user.getName());
  // Navigate to user profile or show details panel
});

​
Next Steps

Custom Text Formatter

Build custom inline text patterns.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

URL Formatter

Auto-detect and style URLs as clickable links.