ngx-mentions

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.

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.