🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

ngx-mentions

Package Overview
Dependencies
Maintainers
1
Versions
147
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-mentions

Mentions component for Angular.

16.2.0
latest
Source
npm
Version published
Weekly downloads
1.5K
-14.47%
Maintainers
1
Weekly downloads
 
Created
Source

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

Mentions GIF

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-mentionsAngular
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

NameDescriptionTypeDefault
textInputElementReference to the text input element.HTMLTextAreaElementRequired
menuTemplateReference to the menu template (used to display the search results).TemplateRefRequired
mentionsConfigAn 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.
ArrayRequired
mentionsAn array of objects containing all the selected mentionsChoiceWithIndices[]Required
searchRegexpThe regular expression that will match the search text after the trigger character. No match will hide the menu.RegExp/^\w*$/
closeMenuOnBlurWhether to close the menu when the host textInputElement loses focus.booleanfalse
selectedChoicesPre-set choices for edit text mode, or to select/mark choices from outside the mentions component.any[][]
tagCssClassThe CSS class to add to highlighted tags.string''
removeWholeTagOnBackspaceWhether to remove whole tag on backspace.booleanfalse

@Outputs

NameDescriptionOutput type
searchCalled 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 }
menuShowCalled when the choices menu is shown.void
menuHideCalled when the choices menu is hidden.void
choiceSelectedCalled when a choice is selected.ChoiceWithIndices
choiceRemovedCalled when a choice is removed.ChoiceWithIndices
selectedChoicesChangeCalled when a choice is selected, removed, or if any of the choices' indices change.ChoiceWithIndices[]
tagClickCalled when the area over a tag is clicked.TagMouseEvent
tagMouseEnterCalled when the area over a tag is moused over.TagMouseEvent
tagMouseLeaveCalled when the area over the tag has the mouse removed from it.TagMouseEvent

ngx-text-input-autocomplete-menu

@Inputs

NameDescriptionTypeDefault
getDisplayLabelA 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) => stringRequired
choicesPre-set choices to show in dropdown.any[][]

@Outputs

NameDescriptionOutput type
selectChoicechoiceSelectedCalled 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.

Keywords

angular-mentions

FAQs

Package last updated on 21 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts