import { Component } from '@angular/core';
import { WrMention } from 'ngwr/mention';
@Component({ imports: [WrMention] })
export class MyComponent {}Mention
Suggest names or tags while typing @ in a text field.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
Type @ at the start of a word to open the list; arrows move, Enter or Tab inserts, Esc closes.
<textarea
wrInput
wrMention
[wrMentionItems]="users"
[(ngModel)]="text"
></textarea>Custom trigger
triggers sets the characters that open the list, such as # for tags.
<textarea
wrInput
wrMention
[wrMentionItems]="tags"
[triggers]="['#']"
[(ngModel)]="text"
></textarea>Types
interface WrMentionItem {
label: string;
[key: string]: unknown;
}| Name | Description | Type | Default |
|---|---|---|---|
WrMentionItem | A mentionable entry — extend with any extra metadata. | interface | — |
labelrequired | Text inserted and shown in the panel. | string | — |
[key: string] | Anything else your app needs back on (wrMentionSelected). | unknown | — |
WrMentionCommit | The (wrMentionSelected) payload. | interface | — |
itemrequired | The selected entry. | WrMentionItem | — |
triggerrequired | The character that opened the panel — '@', '#', whatever triggers listed. | string | — |
queryrequired | The text typed after the trigger, matched as a substring. | string | — |
API
| Name | Description | Type | Default |
|---|---|---|---|
wrMentionItems | Items to filter against the typed query. | readonly T[] | [] |
triggers | Trigger characters that open the panel. | readonly string[] | ['@'] |
displayWith | Maps an item to its display label. | (item: T) => string | `item.label` |
valueWith | Returns the text to insert into the textarea on commit. Receives the picked item and the trigger char. | ((item: T, trigger: string) => string) | null | `${trigger}${displayWith(item)}` |
filterWith | Custom filter. | ((query: string, item: T) => boolean) | null | case-insensitive `includes` over `displayWith(item)`. |
maxResults | Maximum number of items shown in the panel. | number | 8 |
panelClass | Extra CSS classes for the suggestion panel's overlay pane. The pane is appended to the overlay container, not to this component, so nothing in the consumer's own template encloses it and no descendant rule written around the trigger can reach it. This input is the only per-instance handle on it. A space-separated string works as well as an array. | WrClassInput | null |
(wrMentionSelected) | Emits the selected item, trigger, and query whenever the user commits. | WrMentionCommit<T> | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/mention's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-mention-panel-border | var(--wr-border-base) | .wr-mention-panel |
--wr-mention-panel-empty-font-size | var(--wr-text-sm) | .wr-mention-panel |
--wr-mention-panel-empty-padding-x | var(--wr-space-md) | .wr-mention-panel |
--wr-mention-panel-empty-padding-y | var(--wr-space-sm) | .wr-mention-panel |
--wr-mention-panel-font-family | var(--wr-font-family-base) | .wr-mention-panel |
--wr-mention-panel-font-size | var(--wr-text-sm) | .wr-mention-panel |
--wr-mention-panel-list-padding-y | var(--wr-space-xs) | .wr-mention-panel |
--wr-mention-panel-option-line-height | var(--wr-text-sm-leading) | .wr-mention-panel |
--wr-mention-panel-option-padding-x | var(--wr-space-md) | .wr-mention-panel |
--wr-mention-panel-option-padding-y | var(--wr-space-sm) | .wr-mention-panel |
--wr-mention-panel-radius | var(--wr-border-radius-base) | .wr-mention-panel |
Dependencies
| Angular CDK | overlay, portal |
|---|---|
| Built on | Overlay |
See also
Component TextareaA multi-line text field that can grow with its content.Component SelectPick one or several values from a list, with search and free-text tags.Component EditorRich-text editor whose value is the document as a JSON tree.Directive wrAutosizeGrow a <textarea> with its content, between minRows and maxRows.Guide OverlayStyle ngwr's floating panels and control where focus goes.Component InputA directive that styles a native <input> or <textarea>.