NG-ZORROMention
Mention component.
When To Use#
When need to mention someone or something.
import { NzMentionModule } from 'ng-zorro-antd/mention';Examples
Basic usage.
Loading...Controlled mode, for example, to work with Form.
Loading...Configurate disabled and readOnly.
Loading...Customize suggestions.
Loading...Multi lines mode.
Loading...Add status to Mentions with nzStatus, which could be error or warning。
Loading...async
Loading...Customize Trigger Token by nzPrefix props. Default to @, Array<string> also supported.
Loading...Change the suggestions placement.
Loading...Customize suggestions.
Loading...Rendering the mentions.
Loading...API#
<nz-mention [nzSuggestions]="suggestions">
<textarea nz-input [(ngModel)]="value" nzMentionTrigger> </textarea>
</nz-mention>nz-mention#
| Property | Description | Type | Default |
|---|---|---|---|
[nzMentionTrigger] | Trigger element (required) | HTMLTextAreaElement | HTMLInputElement | - |
[nzMentionSuggestion] | Customize the suggestion template | TemplateRef<any> | - |
[nzLoading] | Loading mode | boolean | false |
[nzNotFoundContent] | Suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
[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 list | string | string[] | '@' |
[nzSuggestions] | Suggestion content | any[] | [] |
[nzStatus] | Set validation status | 'error' | 'warning' | - |
[nzValueWith] | Function that maps an suggestion's value | (any) => string | (value: string) => string | |
(nzOnSelect) | Callback function called when select from suggestions | EventEmitter<any> | - |
(nzOnSearchChange) | Callback function called when search content changes | EventEmitter<MentionOnSearchTypes> | - |
Methods#
| Name | Description |
|---|---|
| getMentions | Get 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#
| Property | Description | Type | Default |
|---|---|---|---|
| value | Search keyword | string | - |
| prefix | prefix | string | - |