> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-audit-content-webhooks.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mentions Formatter

> Add @mentions with styled tokens, suggestion list, and click handling in CometChat Angular UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                         |
  | -------------- | ----------------------------------------------------------------------------------------------------------------------------- |
  | Package        | `@cometchat/chat-uikit-angular`                                                                                               |
  | Key class      | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`)                                                               |
  | Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")`                                                       |
  | Purpose        | Format @mentions with styled tokens, suggestion list, and click handling for users and group members                          |
  | Related        | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
</Accordion>

`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.

| Capability              | Description                                               |
| ----------------------- | --------------------------------------------------------- |
| Mention formatting      | Auto-formats `<@uid:...>` placeholders into styled tokens |
| Custom styles           | Colors, fonts, and backgrounds for mention text           |
| User and group mentions | Works with both individual users and group members        |
| Suggestion list         | Generates mention candidates from user input              |
| Click handling          | Listener interface for tap/click on rendered mentions     |

***

## Usage

### 1. Initialize the formatter

```typescript theme={null}
import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-angular";

const mentionsFormatter = new CometChatMentionsFormatter();
mentionsFormatter.setUsers(userList);
```

### 2. Format a message

Provide the raw message string containing mention placeholders, then apply the formatter:

```typescript theme={null}
const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
const formattedMessage = mentionsFormatter.formatSdkMentions(unformattedMessage, mentionedUsers);
// 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`.

```typescript expandable theme={null}
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;
    });
  }
}
```

<Note>
  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.
</Note>

***

## Customization

### Custom mention styles

Override the default mention token styles using CSS. The formatter applies BEM classes that you can target:

```css theme={null}
.cometchat-mentions-you {
  color: var(--cometchat-static-white);
  background-color: var(--cometchat-primary-color);
  font-weight: 600;
  border-radius: 4px;
  padding: 0 4px;
}

.cometchat-mentions-other {
  color: var(--cometchat-primary-color);
  background-color: var(--cometchat-background-color-03);
  font-weight: 600;
  border-radius: 4px;
  padding: 0 4px;
}
```

### Configuring the formatter

Set the logged-in user so the formatter can distinguish self-mentions:

```typescript theme={null}
mentionsFormatter.setLoggedInUser(loggedInUser);
mentionsFormatter.setAllMentionConfig(true, 'everyone');
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Custom Text Formatter" href="/ui-kit/angular/guides/custom-text-formatter">
    Build custom inline text patterns.
  </Card>

  <Card title="Message List" href="/ui-kit/angular/components/cometchat-message-list">
    Render real-time message threads.
  </Card>

  <Card title="All Guides" href="/ui-kit/angular/guides/guides-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="URL Formatter" href="/ui-kit/angular/guides/shortcut-formatter">
    Auto-detect and style URLs as clickable links.
  </Card>
</CardGroup>