There are many libraries for mentions or tributes for core javascript imeplementation. But there is no library for angular which can properyly work with angular forms. For this purpose I have created this library so that developers can use it in their project without any issue.
npm install --save vin-mention.
For Angular 10 use version 3.0.x
- Use
mentionInputdirective at content editable element. eg:
<div vinContentEditable="innerHTML" [formControl]="fc" matContentEditableInput [mentionInput]="mymentions" placeholder="content editable"></div>
- Add MentionConfig
this.mentionConfig = {
filterListItems: true,
insertOnSpace: true,
triggerChar: '@',
selectionCallback: this.githubSelCall
}
- Provide the mention list menu as the content of the
vin-mentioncomponent. eg:
<vin-mention #mymentions="vinMention" [config]="mentionConfig">
<mat-card>
<mat-action-list>
<button mat-list-item *ngFor="let item of mentionList;" [mentionListItem]="item">
{{item.data.value}} </button>
</mat-action-list>
</mat-card>
</vin-mention>
You can design the menu how ever you want. Just take care or using mentionListItem with an input value of type MentionListItemConfig.
DO NOT FORGET TO PROVIDE selectionCallback AS CONFIG TO THE vin-metion, WITH THE FOLLWOING SIGNATURE.
SelectionCallback function will be call when user have selected an item from the list. The returned value from the callback will be inserted at the place of mention.
(selectedItem: MentionListItemConfig) => string;
- You can provide extra config to
vin-mentionby using the following structure.
class MentionConfig {
constructor(
public triggerChar: string,
public filterListItems: boolean,
public insertOnSpace: boolean,
public selectionCallback: SelectionCallback,
) { }
}
- If you are using
vin-mentionwiht contenteditable element, please use withvin-content-editablepackage for better support. However you can use your own controlvalueaccessor implementation for content editalbe element.
Here is demo.