Angular+ @Mentions Component For Text Field

Description:

A simple Angular @mentions component that supports auto-complete for mentions in text input fields, text areas, and content editable fields.

Installation:

# NPM
$ npm install angular-mentions --save

Basic usage:

Import the mentions module.

import { MentionModule } from 'angular-mentions/mention';
...

@NgModule({
    imports: [ MentionModule ],
    ...
})

Specify a string array of the items to suggest.

items: string[] = ["angular", "script", "com", "..."]

In your text field:

<input type="text" [mention]="items">

Possible options.

{
  triggerChar: '#',
  maxItems: 10,
  mentionSelect: function(){}
  labelKey: 'name',
  disableSearch: false
}

<input type="text" [mention]="items" [mentionConfig]="{...'}">

Preview: