Mentions component for Angular.
npm install ngx-mentionsFlexible, lightweight, easy-to-use, without external dependencies - Mentions component for Angular.
bash
$ npm i ngx-mentions
`After importing the module the lib is ready to use:
typescript
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
$3
Name | Description | Type | Default
--- | --- | --- | ---
| 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*$/
| Whether to close the menu when the host textInputElement loses focus. | boolean | false
| Pre-set choices for edit text mode, or to select/mark choices from outside the mentions component. | any[] | []
| The CSS class to add to highlighted tags. | string | ''
| Whether to remove whole tag on backspace. | boolean | false$3
Name | Description | Output type
--- | --- | ---
| 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 }
| Called when the choices menu is shown. | void
| Called when the choices menu is hidden. | void
| Called when a choice is selected. | ChoiceWithIndices
| Called when a choice is removed. | ChoiceWithIndices
| Called when a choice is selected, removed, or if any of the choices' indices change. | ChoiceWithIndices[]
| Called when the area over a tag is clicked. | TagMouseEvent
| Called when the area over a tag is moused over. | TagMouseEvent
| Called when the area over the tag has the mouse removed from it. | TagMouseEvent
ngx-text-input-autocomplete-menu
$3
Name | Description | Type | Default
--- | --- | --- | ---
| 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[] | []$3
Name | Description | Output type
--- | --- | ---
| choiceSelected | Called when a choice is selected. | any$3
html
rows="6"
wrap="hard"
#textareaRef
placeholder="Enter '@' and start typing..."
[(ngModel)]="text">
[mentionsConfig]="mentionsConfig"
[searchRegexp]="'^([-&.\\w]+ *){0,3}$'"
[mentions]="mentions"
[removeWholeTagOnBackspace]="true"
(search)="loadChoices($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event)"
(menuShow)="onMenuShow()"
(menuHide)="onMenuHide()">
(selectChoice)="selectChoice($event)">
`html
rows="6"
wrap="hard"
#textareaRef
placeholder="Enter '@' and start typing..."
[(ngModel)]="text">
[mentionsConfig]="mentionsConfig"
[searchRegexp]="'^([-&.\\w]+ *){0,3}$'"
[mentions]="mentions"
[removeWholeTagOnBackspace]="true"
(search)="loadChoices($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event)"
(menuShow)="onMenuShow()"
(menuHide)="onMenuHide()">
ngxKbListNavigation
[choices]="choices"
(selectChoice)="selectChoice($event)"
[class.loader-only]="!choices.length && loading">
class="ngx-selectable-list-item"
(click)="selectChoice(user)">
{{user.name}}
``Sumit Basak