Angular mentions

An Angular 6 directive lets you mention people and add placeholder: - Mention people. - Add configurable placeholder. - Get value by formControl directive of Angular { ReactiveFormsModule }.

Getting Started

Install

Install angular-mentions directive via npm:

npm install angular-mention --save

Import module to *.module.ts file

import { NgMentionModule } from 'angular-mention';
@NgModule({
imports: [NgMentionModule]
})

Example

 <form [formGroup]="mentionForm">
   <div formControlName="mention"
        [ng-mention]="config"
        [list]='managerList'
        (onSelect)="onSelect($event)"
        (onSearch)="onSearch($event)">
   </div>
<form>

API

@Input your data list array of objects.

[list]='managerList'

@Output triggers each time when item selected, bubbling value is a reference to item.

(onSelect)="selectHandler($event)"

@Output triggers when list is open and you search value, bubbling value is string.

(onSearch)="searchHandler($event)

Also you can follow for value in reach text area by formControl or formControlName. Each time when item selects in value of base element add innerHTML value with data-id of item like <span data-id="item's id" class="mention"> choosen value </span>

Configuration

If it is need ng-mention can be configurable as @Input value to directive.

[ng-mention]="config"

Possible options

 public config = {
   newLineOnEnter: boolean
   outputItemProperty: string,
   baseComponentPlaceholderClass: string, 
   listClass: string, 
   listItemClass: string,
   baseComponentPlaceholder: string, 
   character: string,
   emptyListPlaceholder: string, 
   outputMentionProperty: string,
   listItemHoverClass: string,
   listEmptyClass: string, 
   mentionClass: string, 
   };

newLineOnEnter(default: false) - if true, 'enter' button make new line.
outputItemProperty(required) - value shows as options of list(default ).
baseComponentPlaceholderClass - name of class styles placeholder of component on which uses directive.
listClass - class for styling list (setup default).
listItemClass - class for styling item of list (setup default).
baseComponentPlaceholder - value for component on which uses directive .
character - character that will be use for show list (default ).
emptyListPlaceholder - value for empty list (default: )
outputMentionProperty(requred) - value that will be display in future 'span' tag (default: ).
listItemHoverClass - class for hover event on item list.
listEmptyClass - class for empty state of list.
mentionClass - class for mention.