Mention

Used to mention someone or something in an input.
Import
Source components/mention
Docs Edit this page

When To Use#

When need to mention someone or something.

Examples

Basic

Basic usage.

      Loading...
With Form

Controlled mode, for example, to work with Form.

      Loading...
disabled or readOnly

Configurate disabled and readOnly.

      Loading...
Icon Image

Customize suggestions.

      Loading...
autoSize

Height autoSize.

      Loading...
Status

Add status to Mentions with nzStatus, which could be error or warning。

      Loading...
Variants

Variants of Mentions, there are four variants: outlinedfilledborderless and underlined.

      Loading...
Asynchronous loading

async

      Loading...
Customize Trigger Token

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

      Loading...
Placement

Change the suggestions placement.

      Loading...
Customize Suggestion

Customize suggestions.

      Loading...
Preview

Rendering the mentions.

      Loading...


With clear icon

Customize clear button.

      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[][]
[nzStatus]Set validation status'error' | 'warning'-
[nzAllowClear]If allow to remove mentions content with clear iconbooleanfalse
[nzClearIcon]The custom clear iconTemplateRef<void>-
[nzVariant]Variants of Input'outlined' | 'filled' | 'borderless' | 'underlined''outlined'
[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>-
(nzOnClear)Callback function called when click on clear buttonEventEmitter<void>-

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-