Angular @Mentions Component

ngx-mentions

Flexible, lightweight, easy-to-use, without external dependencies - Mentions component for Angular.

Docs and demo

Click here for a Demo

Stackblitz working example

Github Repo

Getting Started

Installation:

$ npm i ngx-mentions

After importing the module the lib is ready to use:

import { NgxMentionsModule } from 'ngx-mentions';

@NgModule({
  imports: [NgxMentionsModule],
  declarations: [],
})

export class DemoModule {}

Compatibility

Latest version available for each version of Angular

| ngx-mentions | Angular | | ------------ | ----------- | | 9.x | >=9 | | 10.x | >=10 | | 11.x | >=11 | | 12.x | >=12 | | 13.x | >=13 | | 14.x | >=14 | | 15.x | >=15 | | 16.x | >=16 |

ngx-mentions component

@Inputs

Name | Description | Type | Default --- | --- | --- | --- textInputElement | Reference to the text input element. | HTMLTextAreaElement | Required menuTemplate | Reference to the menu template (used to display the search results). | TemplateRef | Required | mentionsConfig | An array of objects representing the configuration for mentions. Each object should have the following properties:---triggerCharacter: The character that will trigger the menu to appear.getChoiceLabel: A function that formats the selected choice and returns the label for the choice. | Array | Required | mentions | An array of objects containing all the selected mentions | ChoiceWithIndices[] | Required | searchRegexp | The regular expression that will match the search text after the trigger character. No match will hide the menu. | RegExp | /^\w*$/ closeMenuOnBlur | Whether to close the menu when the host textInputElement loses focus. | boolean | false selectedChoices | Pre-set choices for edit text mode, or to select/mark choices from outside the mentions component. | any[] | [] tagCssClass | The CSS class to add to highlighted tags. | string | '' removeWholeTagOnBackspace | Whether to remove whole tag on backspace. | boolean | false

@Outputs

Name | Description | Output type --- | --- | --- search | Called on user input after entering trigger character. Emits search term to search by and the char which trigger the current mention search. | { searchText: string, triggerCharacter: string } menuShow | Called when the choices menu is shown. | void menuHide | Called when the choices menu is hidden. | void choiceSelected | Called when a choice is selected. | ChoiceWithIndices choiceRemoved | Called when a choice is removed. | ChoiceWithIndices selectedChoicesChange | Called when a choice is selected, removed, or if any of the choices' indices change. | ChoiceWithIndices[] tagClick | Called when the area over a tag is clicked. | TagMouseEvent tagMouseEnter | Called when the area over a tag is moused over. | TagMouseEvent tagMouseLeave | Called when the area over the tag has the mouse removed from it. | TagMouseEvent

ngx-text-input-autocomplete-menu

@Inputs

Name | Description | Type | Default --- | --- | --- | --- getDisplayLabel | A function that formats the selected choice once selected. The result (label) is also used as a choice identifier (e.g. when editing choices). | (choice: any) => string | Required choices | Pre-set choices to show in dropdown. | any[] | []

@Outputs

Name | Description | Output type --- | --- | --- selectChoice | choiceSelected | Called when a choice is selected. | any

Basic example

<div class="relative-block-container">
  <textarea cols="42"
            rows="6"
            wrap="hard"
            #textareaRef
            placeholder="Enter '@' and start typing..."
            [(ngModel)]="text"></textarea>

  <ngx-mentions [textInputElement]="textareaRef"
                [menuTemplate]="menuTemplate"
                [mentionsConfig]="mentionsConfig"
                [searchRegexp]="'^([-&.\\w]+ *){0,3}$'"
                [mentions]="mentions"
                [removeWholeTagOnBackspace]="true"
                (search)="loadChoices($event)"
                (selectedChoicesChange)="onSelectedChoicesChange($event)"
                (menuShow)="onMenuShow()"
                (menuHide)="onMenuHide()"></ngx-mentions>

  <ng-template #menuTemplate
               let-selectChoice="selectChoice">
    <ngx-text-input-autocomplete-menu [choices]="choices"
            [getDisplayLabel]="getDisplayLabel"
            (selectChoice)="selectChoice($event)">
    </ngx-text-input-autocomplete-menu>
  </ng-template>
</div>

<div class="relative-block-container">
  <textarea cols="42"
            rows="6"
            wrap="hard"
            #textareaRef
            placeholder="Enter '@' and start typing..."
            [(ngModel)]="text"></textarea>

  <ngx-mentions [textInputElement]="textareaRef"
                [menuTemplate]="menuTemplate"
                [mentionsConfig]="mentionsConfig"
                [searchRegexp]="'^([-&.\\w]+ *){0,3}$'"
                [mentions]="mentions"
                [removeWholeTagOnBackspace]="true"
                (search)="loadChoices($event)"
                (selectedChoicesChange)="onSelectedChoicesChange($event)"
                (menuShow)="onMenuShow()"
                (menuHide)="onMenuHide()"></ngx-mentions>

  <ng-template #menuTemplate
               let-selectChoice="selectChoice">
    <ul class="ngx-selectable-list"
      ngxKbListNavigation
      [choices]="choices"
      (selectChoice)="selectChoice($event)"
      [class.loader-only]="!choices.length && loading">
      <li *ngFor="let user of choices"
        class="ngx-selectable-list-item"
        (click)="selectChoice(user)">
        <span title="{{user.name}}">{{user.name}}</span>
      </li>
    </ul>
  </ng-template>
</div>

Author

Abhijit Chikane

Github | LinkedIn

Sumit Basak

Github | LinkedIn

Support

All suggestions and improvements are welcome and appreciated.

License

The MIT License.