# rich-text-editor-mention

> Rich text editor sample providing user suggestions when typing mention characters.

**Framework:** angular  **Component:** RichTextEditor  **Variant:** mention

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/rich-text-editor-mention.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-richtexteditor
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/rich-text-editor-mention/mention-integration.component.ts

```typescript
/**
 * Rich Text Editor Mention integration Functionality Sample
 */
import { Component, ViewEncapsulation, ViewChild} from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorModule, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';
import { Mention } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    selector: 'control-content',
    templateUrl: 'mention-integration.html',
    styleUrls: ['mention-integration.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],
    standalone: true,
    imports: [ RichTextEditorModule, MentionModule]
})
export class MentionIntegrationComponent {
    @ViewChild('mention') mentionObj!: Mention;
    public data: { [key: string]: Object }[] = [
        { Name: "Selma Rose", Status: "active", Eimg: "2", EmailId: "selma@gmail.com" },
        { Name: "Maria", Status: "active", Eimg: "1", EmailId: "maria@gmail.com" },
        { Name: "Russo Kay", Status: "busy", Eimg: "8", EmailId: "russo@gmail.com" },
        { Name: "Camden Kate", Status: "active", Eimg: "9", EmailId: "camden@gmail.com" },
        { Name: "Robert", Status: "busy", Eimg: "dp", EmailId: "robert@gmail.com" },
        { Name: "Garth", Status: "active", Eimg: "7", EmailId: "garth@gmail.com" },
        { Name: "Andrew James", Status: "away", Eimg: "pic04", EmailId: "noah@gmail.com" },
        { Name: "Olivia", Status: "busy", Eimg: "5", EmailId: "olivia@gmail.com" },
        { Name: "Sophia", Status: "away", Eimg: "6", EmailId: "sophia@gmail.com" },
        { Name: "Margaret", Status: "active", Eimg: "3", EmailId: "margaret@gmail.com" },
        { Name: "Ursula Ann", Status: "active", Eimg: "dp", EmailId: "ursula@gmail.com" },
        { Name: "Laura Grace", Status: "away", Eimg: "4", EmailId: "laura@gmail.com" },
        { Name: "Albert", Status: "active", Eimg: "pic03", EmailId: "albert@gmail.com" },
        { Name: "William", Status: "away", Eimg: "10", EmailId: "william@gmail.com" }
      ];
      public  fieldsData: { [key: string]: string } = { text: 'Name' };

}

```

### src/components/rich-text-editor-mention/mention-integration.css

```css
#mention-TemplateList {
    position: relative;
    display: inline-block;
    padding:2px;
}
.mentionNameList .person, .mentionNameList.email {
    display: block;
    line-height: 20px;
    text-indent: 5px;
}
.mentionNameList .person {
    font-size: 16px;
}
.mentionEmpImage {
    display: inline-block;
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: 25px;
}
#mention-TemplateList .e-badge-success {
    left: 76%;
    bottom: 4px;
    top: auto;
}
#mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
    line-height: 8px;
}
#mention-TemplateList .e-badge-success {
    background-color: #4d841d;
    color: #fff;
}
#mention-TemplateList .e-badge-success.away {
    background-color: #fedd2d;
    color: #fff;
}
#mention-TemplateList .e-badge-success.busy {
    background-color: #de1a1a;
    color: #fff;
}
#mention-TemplateList .e-badge.e-badge-dot {
    height: 10px;
    width: 10px;
}
#mention_integration .e-mention-chip{
    cursor: pointer;
}
```

### src/components/rich-text-editor-mention/mention-integration.html

```html

<div class="control-section">
    <ejs-richtexteditor id="mention_integration"  placeholder="Type @ and tag the name">
        <ng-template #valueTemplate>
            <p>Hello <span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">&#64;Maria</a></span>&#8203;</p>
            <p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list. </p>
        </ng-template>
    </ejs-richtexteditor>
</div>

<ejs-mention #mention [dataSource]='data' target='#mention_integration_rte-edit-view' [fields]='fieldsData' [suggestionCount]="8" [showMentionChar]="false" [allowSpaces]="true"  
popupWidth='250px' popupHeight='200px' [suffixText]='&nbsp;'>
    <ng-template #itemTemplate let-data>
        <table>
            <tr>
              <td>
                <div id="mention-TemplateList"> 
                  <img class="mentionEmpImage" src="./assets/rich-text-editor/images/{{data.Eimg}}.png" alt="employee" />
                  <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom {{data.Status}}"></span>
                </div>
                </td>
                <td class="mentionNameList">
                  <span class="person">{{data.Name}}</span>
                  <span class="email">{{data.EmailId}}</span>
                </td>
              </tr>
            </table>
    </ng-template>
    <ng-template #displayTemplate let-data>
        <a href="mailto:{{data.EmailId}}" title="{{data.EmailId}}">&#64;{{data.Name}}</a>
    </ng-template>
</ejs-mention>

```