@lampoint/mention v0.0.3

Mention

Angular directive for mentioning users. It works with contenteditable elements. This is an open source project from Lampoint.

DEMO

Installation

npm install @lampoint/mention

Usage

Add MentionModule in app.module

import { MentionModule } from '@lampoint/mention';

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

Basic example

  mentions = [
    { id: 'denis', name: 'Denis' },
    { id: 'john', name: 'John' },
    { id: 'maria', name: 'Maria' },
    { id: 'michelle', name: 'Michelle' },
    { id: 'sophia', name: 'Sophia' },
    { id: 'james', name: 'James' },
    { id: 'emma', name: 'Emma' },
    { id: 'dave', name: 'Dave' }];

<div contenteditable="true" [mention]="mentions"></div>

Config options and events example

<div contenteditable="true" [mention]="mentions" 
[mentionConfig]="{trigger: '#', direction: 'top'}"
(selectedMention)="selectedMention($event)"
(searchTerm)="searchTerm($event)"></div>

Custom item template example

<ng-template #itemTemplate let-item="item"> {{item.id}} {{item.name}}</ng-template>

<div contenteditable="true" [mention]="mentions" [itemTemplate]="itemTemplate"></div>

Config options

Output events

License

MIT