Introducing the New Angular Mention Component
Tags: angular, webdev, whatsnew
Published: 2022-11-08 13:32:06

---
title: Introducing the New Angular Mention Component
published: true
date: 2022-11-08 11:00:03 UTC
tags: angular, webdev, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/angular-mention-component.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uiidns0z6ll5o59q6fir.png
---

We are happy to introduce the new [Angular Mention](https://www.syncfusion.com/angular-components/angular-mention "Angular Mention Component") component in our [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Main Release") release. It provides one of the most anticipated features for all our editor components.

Let’s explore the Angular Mention component, its UI design, and its features with code examples.

## Overview

The new Angular Mention component provides @mention and #hashtag functionality for any editor control. It lets users tag or select a user or group name from a suggestion list. It has several out-of-the-box features such as data binding, grouping, UI customization, accessibility, and more.

## Key features

The following are the key features of the Angular Mention component:

- [Data binding](#data-binding).
- [Mention character customization](#mention-character-customization).
- [Highlighting for matched text](#highlighting-for-matched-text).
- [Icons paired with suggestion list items](#icons-paired-with-suggestion-list-items).
- [Categorizable suggestion lists](#categorizable-suggestion-lists).
- [Sortable suggestion lists](#sortable-suggestion-lists).
- [UI customization with templates](#ui-customization-with-templates).
- [Web accessibility and keyboard support](#web-accessibility-and-keyboard-support).

### <a name="data-binding">Data binding</a>

The Angular Mention component supports different types of data sources, such as arrays of primitive data, JSON data collections, and remote data sources using adapters such as OData, OData V4, URLs, JSON, and web APIs.

The following code example shows how to bind a string of array data.

**[app.component.ts]**

```js
import { Component } from ‘@angular/core’;
 
@Component({
 selector: ‘app-root’,
 // Specifies the template string for the Mention component.
 Template: `<div id=”commentBox” placeholder=”Type @ and tag user” ></div><ejs-mention [dataSource]=’userData’ [target]=’commentTarget’></ejs-mention>`
})
export class AppComponent {
 constructor() {
 }
 // Defines the array of data.
 Public userData: string[] = [‘Selma Rose’, ‘Russo Kay’, ‘Camden Kate’, ‘Garth’, ‘Margaret’, ‘Robert’, ‘Albert’, ‘Michael’];
 // Sets target editor or editable element.
 Public commentTarget: string = ‘#commentBox’;
}
```

### <a name="customize-mention-character">Customize mention character</a>

You can easily customize the mentioned character using the [mentionChar](https://ej2.syncfusion.com/angular/documentation/api/mention/#mentionchar "mentionChar property of Angular Mention component") property. Then, you can show or hide the mentioned character while tagging or selecting items by using the [showMentionChar](https://ej2.syncfusion.com/angular/documentation/api/mention/#showmentionchar "showMentionChar property of Angular Mention component") property. You can also use multiple mention characters that correspond to different suggestion lists within a single editor.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Customizing-the-Mention-Character-in-the-Angular-Mention-Component.png" alt="Customizing the Mention Character in the Angular Mention Component" style="width:100%">

  <figcaption>Customizing the Mention Character in the Angular Mention Component</figcaption>

</figure>

**Note:** For more details, refer to our [multiple suggestion list example for the Angular Mention component.](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/mention/multiple-list "Example for multiple suggestion list in Angular Mention component")

### <a name="highlight-the-matched-text">Highlight the matched text</a>

The Angular Mention component has the option to configure different visual appearances for the matching text of each suggestion through the [highlight](https://ej2.syncfusion.com/angular/documentation/api/mention/#highlight "highlight property of Angular Mention component") property.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Highlighting-the-Matched-Text-in-the-Angular-Mention-Component.png" alt="Highlighting the Matched Text in the Angular Mention Component" style="width:100%">

  <figcaption>Highlighting the Matched Text in the Angular Mention Component</figcaption>

</figure>

### <a name="suggestion-list-items-with-icons">Suggestion list items with icons</a>

The Angular Mention component comes with built-in icon support for visual representations of the suggestion items. To enable this feature, configure the CSS class name through the data source and map the [fields.iconCss](https://ej2.syncfusion.com/angular/documentation/api/mention/fieldSettingsModel/#iconcss "fields.iconCss property in Angular Mention component") property for each item.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Angular-Mention-Component-Showing-the-Suggestion-List-Items-with-Icons.png" alt="Angular Mention Component Showing the Suggestion List Items with Icons" style="width:100%">

  <figcaption>Angular Mention Component Showing the Suggestion List Items with Icons</figcaption>

</figure>

### <a name="categorize-the-suggestions-list-items">Categorize the suggestions list items</a>

You can organize suggestions into groups based on different categories. The category for each list item can be mapped through the [groupBy](https://ej2.syncfusion.com/angular/documentation/api/mention/fieldSettingsModel/#groupby "groupBy property of Angular Mention component") field in the data source.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Categorizing-the-Suggestion-List-Items-in-the-Angular-Mention-Component.png" alt="Categorizing the Suggestion List Items in the Angular Mention Component" style="width:100%">

  <figcaption>Categorizing the Suggestion List Items in the Angular Mention Component</figcaption>

</figure>

### <a name="sorting-the-suggestions-list-items">Sorting the suggestions list items</a>

The Angular Mention component has built-in support to display the suggestion list items in ascending or descending order using the [sortOrder](https://ej2.syncfusion.com/angular/documentation/api/mention#sortorder "sortOrder property of Angular Mention component") property.

### <a name="ui-customization-with-templates">UI customization with templates</a>

To create custom user experiences, use the template option in the Angular Mention component. You can customize the suggestion list items, selection display text, no-record display, and data loading spinner using the template support.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Customizing-the-Angular-Mention-Component-UI-with-Templates.png" alt="Customizing the Angular Mention Component UI with Templates" style="width:100%">

  <figcaption>Customizing the Angular Mention Component UI with Templates</figcaption>

</figure>

**Note:** For more details, refer to the [example for the Angular Mention component template](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/mention/template "Example for the Angular Mention component template").

### <a name="web-accessibility-and-keyboard-support">Web accessibility and keyboard support</a>

The Angular Mention component supports keyboard interaction and web accessibility standards based on the [WAI-ARIA ](https://www.w3.org/TR/wai-aria-practices/ "ARIA Authoring Practices Guide (APG)")specifications, roles, and states. The supported keyboard shortcuts are as follows:

- **Down arrow** : After the pop-up list opens, press the Down arrow key to move to the next list item. If it is the last item, then the selection will focus on the first item in the list.
- **Up arrow** : After the pop-up list opens, press the Up arrow key to move to the previous list item. If it is the first item, then the selection will focus on the last item in the list.
- **Home/Page up:**  Moves to the first item in the list after the pop-up list opens.
- **End/Page down** : Moves to the last item in the list after the pop-up list opens.
- **Esc** : Closes the pop-up list if it is in the open state.
- **Enter** : Selects the focused item, and when the pop-up list is in an open state it closes.
- **Tab** : Focuses on the next TabIndex element on the page when the pop-up list is closed. Otherwise, inserts the selected pop-up list item and close the pop-up list.

## **How to use it**

You can include the Mention component in the rich text editor, text area, text box, or other editable components. It has a huge set of resources for developers, including source code on [GitHub,](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/dropdowns/src/mention "Demo of Angular Mention component on GitHub") [live demos](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/mention/default "Live demo of Angular Mention component"), and thoroughly explained customization features in its [documentation](https://ej2.syncfusion.com/angular/documentation/mention/getting-started/ "Getting started with Angular Mention component").

## **Supported platforms**

The Mention component is also available on the following platforms.

<table>
<tbody>
<tr>
<td width="132"><strong>Platform</strong></td>
<td width="216"><strong>Live demos</strong></td>
<td width="276"><strong>Documentation</strong></td>
</tr>
<tr>
<td width="132"><a title="React UI components" href="https://www.syncfusion.com/react-components" target="_blank" rel="noopener">React</a></td>
<td width="216"><a title="Live demo of React Mention component" href="https://ej2.syncfusion.com/react/demos/#/bootstrap5/mention/default" target="_blank" rel="noopener">React Mention demos</a></td>
<td width="276"><a title="Getting started with React Mention component" href="https://ej2.syncfusion.com/react/documentation/mention/getting-started/" target="_blank" rel="noopener">Getting started with React Mention</a></td>
</tr>
<tr>
<td width="132"><a title="Vue UI components" href="https://www.syncfusion.com/vue-components" target="_blank" rel="noopener">Vue</a></td>
<td width="216"><a title="Live demo of Vue Mention component" href="https://ej2.syncfusion.com/vue/demos/#/bootstrap5/mention/default.html" target="_blank" rel="noopener">Vue Mention demos</a></td>
<td width="276"><a title="Getting started with Vue Mention component" href="https://ej2.syncfusion.com/vue/documentation/mention/getting-started/" target="_blank" rel="noopener">Getting started with Vue Mention</a></td>
</tr>
<tr>
<td width="132"><a title="JavaScript UI components" href="https://www.syncfusion.com/javascript-ui-controls" target="_blank" rel="noopener">JavaScript</a></td>
<td width="216"><a title="Live demo of JavaScript Mention component" href="https://ej2.syncfusion.com/demos/#/bootstrap5/mention/default.html" target="_blank" rel="noopener">JavaScript Mention demos</a></td>
<td width="276"><a title="Getting started with JavaScript Mention component" href="https://ej2.syncfusion.com/documentation/mention/getting-started/" target="_blank" rel="noopener">Getting started with JavaScript Mention</a></td>
</tr>
<tr>
<td width="132"><a title="ASP.NET Core UI controls" href="https://www.syncfusion.com/aspnet-core-ui-controls" target="_blank" rel="noopener">ASP.NET Core</a></td>
<td width="216"><a title="Live demo of ASP.NET Core Mention control" href="https://ej2.syncfusion.com/aspnetcore/Mention/Default#/fluent" target="_blank" rel="noopener">ASP.NET Core Mention demos</a></td>
<td width="276"><a title="Getting started with ASP.NET Core Mention component" href="https://ej2.syncfusion.com/aspnetcore/documentation/mention/getting-started" target="_blank" rel="noopener">Getting started with ASP.NET Core Mention</a></td>
</tr>
<tr>
<td width="132"><a title="ASP.NET MVC UI controls" href="https://www.syncfusion.com/aspnet-mvc-ui-controls" target="_blank" rel="noopener">ASP.NET MVC</a></td>
<td width="216"><a title="Live demo of ASP.NET MVC Mention control" href="https://ej2.syncfusion.com/aspnetmvc/Mention/DefaultFunctionalities#/fluent" target="_blank" rel="noopener">ASP.NET MVC Mention demos</a></td>
<td width="276"><a title="Getting started with ASP.NET MVC Mention control" href="https://ej2.syncfusion.com/aspnetmvc/documentation/mention/getting-started" target="_blank" rel="noopener">Getting started with ASP.NET MVC Mention</a></td>
</tr>
</tbody>
</table>

## Conclusion

Thanks for reading! In this blog, we have seen the features of the new [Angular Mention](https://www.syncfusion.com/angular-components/angular-mention "Angular Mention component") component that rolled out in our [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 release") release. These features are also listed on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Essential Studio Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion Essential Studio What’s New page") pages. Try out the component and share your feedback as comments on this blog.

You can also reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## **Related blogs**

- [Top 7 Features of Angular 14](https://www.syncfusion.com/blogs/post/top-7-features-of-angular-14.aspx "Blog: Top 7 Features of Angular 14")
- [What’s New in 2022 Volume 3: Essential JS 2](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-essential-js-2.aspx "Blog: What’s New in 2022 Volume 3: Essential JS 2")
- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/post/skeleton-loading-indicator-in-essential-js-2-datagrid.aspx "Blog: Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid")