Mention

Mention component.

When To Use#

When need to mention someone or something.

import { NzMentionModule } from 'ng-zorro-antd/mention';

Examples

Basic usage.

expand codeexpand code
Loading...

async

expand codeexpand code
Loading...

Customize suggestions.

expand codeexpand code
Loading...

Multi lines mode.

expand codeexpand code
Loading...

Customize Trigger Token by nzPrefix props. Default to @, Array<string> also supported.

expand codeexpand code
Loading...

Change the suggestions placement.

expand codeexpand code
Loading...

Customize suggestions.

expand codeexpand code
Loading...
   

Controlled mode, for example, to work with Form.

expand codeexpand code
Loading...

Configurate disabled and readOnly.

expand codeexpand code
Loading...

Rendering the mentions.

expand codeexpand code
Loading...

API#

<nz-mention [nzSuggestions]="suggestions">
 <textarea
    nz-input
    [(ngModel)]="value"
    nzMentionTrigger>
  </textarea>
</nz-mention>

nz-mention#

PropertyDescriptionTypeDefault
[nzMentionTrigger]Trigger element (required)HTMLTextAreaElement | HTMLInputElement-
[nzMentionSuggestion]Customize the suggestion templateTemplateRef<any>-
[nzLoading]Loading modebooleanfalse
[nzNotFoundContent]Suggestion when suggestions emptystring'无匹配结果,轻敲空格完成输入'
[nzPlacement]The position of the suggestion relative to the target, which can be one of top and bottom'button' | 'top''bottom'
[nzPrefix]Character which will trigger Mention to show mention liststring | string[]'@'
[nzSuggestions]Suggestion contentany[][]
[nzValueWith]Function that maps an suggestion's value(any) => string | (value: string) => string
(nzOnSelect)Callback function called when select from suggestionsEventEmitter<any>-
(nzOnSearchChange)Callback function called when search content changesEventEmitter<MentionOnSearchTypes>-

Methods#

NameDescription
getMentionsGet the mentions array in the input[nzMentionTrigger]

nzMentionTrigger#

Trigger element

<nz-mention>
 <textarea nzMentionTrigger></textarea>
</nz-mention>
<nz-mention>
 <input nzMentionTrigger>
</nz-mention>

nzMentionSuggestion#

Customize the suggestion template

  <nz-mention
    [nzSuggestions]="items"
    [nzValueWith]="valueWith">
    <input nz-input nzMentionTrigger>
    <ng-container *nzMentionSuggestion="let item">
        <span>{{ item.label }} - {{ item.value }}</span>
    </ng-container>
  </nz-mention>

MentionOnSearchTypes#

PropertyDescriptionTypeDefault
valueSearch keywordstring-
prefixprefixstring-