README

Angular Mentions Component

@flxng/mentions

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

Docs and Demo

https://flxng.codeeve.com/#/mentions

Mentions GIF

Getting Started

Installation:

$ npm i @flxng/mentions

After importing the module the lib is ready to use:

import { MentionsModule } from '@flxng/mentions';

@NgModule({
  imports: [MentionsModule],
  declarations: [],
})
export class DemoModule {}

Usage

Check also Docs and Demo.

@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
`getChoiceLabel`	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
`triggerCharacter`	The character which will trigger the search.	`string`	`@`
`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`	`''`

@Outputs

Name	Description	Output type
`search`	Called on user input after entering trigger character. Emits search term to search by.	`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`

Basic example

<div class="relative-block-container">
  <textarea cols="60"
            rows="10"
            #textareaRef
            placeholder="Enter '@' and start typing some name, e.g. 'Doe'"
            [(ngModel)]="text"></textarea>

  <flx-mentions [textInputElement]="textareaRef"
                [menuTemplate]="menuTemplate"
                [triggerCharacter]="'@'"
                [getChoiceLabel]="getChoiceLabel"
                (search)="loadChoices($event)"
                (selectedChoicesChange)="onSelectedChoicesChange($event)"
                (menuShow)="onMenuShow()"
                (menuHide)="onMenuHide()"></flx-mentions>

  <ng-template #menuTemplate
               let-selectChoice="selectChoice">
    <ul class="flx-selectable-list">
      <li *ngFor="let user of choices"
          class="flx-selectable-list-item"
          (click)="selectChoice(user)">
        <span title="{{user.name}}">{{user.name}}</span>
      </li>
    </ul>
  </ng-template>
</div>

Support

All suggestions and improvements are welcome and appreciated.

License

The MIT License.

Usage no npm install needed!