angular-social-mentions v1.0.5

Angular Mentions

Forked from https://github.com/dmacfarlane/angular-mentions.

Simple Angular mentions inspired by Ment.io.

Click here for a Demo

Provides auto-complete suggestions for @mentions in text input fields, text areas, and content editable fields. Not fully browser tested and comes without warranty!

The installation and usage are still the same. The instructions below are still the same as in dmacfarlane/angular-mentions. The differences are in the additional optional config.

To install and start the demo application:

git clone https://github.com/crystalyutiamco/angular-social-mentions.git
cd angular-social-mentions
npm install
ng serve

Usage

Add the package as a dependency to your project using:

npm install angular-social-mentions

Add the module to your app.module imports:

import { MentionModule } from 'angular-social-mentions';
...

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

Add the [mention] directive to your input element:

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

Where items is a string array of the items to suggest. For example:

items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...

Configuration Options

The following optional configuration items can be used.

For Example:

<input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name'}">

Output Events

The following output events can be used.

Alternative Usage

The component can also be used by only specifying the mentionConfig object:

<input type="text" [mentionConfig]="mentionConfig">

With the following structure:

let mentionConfig = {
    items: [ "Noah", "Liam", "Mason", "Jacob", ... ],
    triggerChar: "@",
    ...
}

In this way, multiple config objects can be used:

let mentionConfig = {
    mentions: [
        {
            items: [ "Noah", "Liam", "Mason", "Jacob", ... ],
            triggerChar: '@'
        },
        {
            items: [ "Red", "Yellow", "Green", ... ],
            triggerChar: '#'
        },
    }]
}

This allows different lists and trigger characters to be configured.

Note that because objects are mutable, changes to the items within the config will not be picked up unless a new mentionConfig object is created.

Mention Prompt

Instead of displaying a list, you can show a prompt containing a message in the dropdown instead. The following inputs can be used to do so.

Sample usage of Mention Prompt:

<input class="form-control" type="text"
  [mentionConfig]="mentionConfig"
  [showMentionPrompt]="showMessageTemplate$ | async"
  [mentionPromptTemplate]="messageTemplate">

<ng-template #messageTemplate>
  <div>
    <span>Sample Mention Prompt</span>
    <a (mousedown)="onClickThisClick($event);$event.preventDefault()">Click Here</a>
  </div>
</ng-template>