Skip to content
@ng-doc/app / Class

NgDocStringListControlComponent

The playground control of string[] inputs: a chip combobox (NgDocListControl). Typed text is an item as it is, and a double click, Enter or F2 edits a chip in place.

Decorators
@Component
Selectors
ng-doc-string-list-control
Extends
NgDocListControl<string>
DeclarationTypeScript
@Component({ … })
export class NgDocStringListControlComponent
  extends NgDocListControl<string> { … }

Members

Constructor

1
()
—

Properties

31
announcement: WritableSignal<string>
protectedreadonly inherited from NgDocListControl

What the live region announces: the new position of a moved item.

canReset: Signal<boolean>
protectedreadonly inherited from NgDocListControl

Whether Reset is shown: the value differs from the default.

change: (value: T | null) => void
protected inherited from DIControlValueAccessor
—
changeDetectorRef: ChangeDetectorRef
protectedreadonly inherited from DIControlValueAccessor
—
config?: DIControlConfig<TModel, TChildModel> | undefined
protectedreadonly inherited from DIControl
—
default: InputSignal<T[] | undefined>
readonly input() inherited from NgDocListControl

Default value of the input; Reset returns to it.

disabledValue: WritableSignal<boolean>
protectedreadonly inherited from DIControlValueAccessor
—
dragIndex: WritableSignal<number | null>
protectedreadonly inherited from NgDocListControl

The position of the chip being dragged, or null.

editing: WritableSignal<number | null>
protectedreadonly inherited from NgDocListControl

The position of the item edited in place, or null.

editInvalid: Signal<boolean>
protectedreadonly inherited from NgDocListControl

Whether the field that edits an item holds text that is not an item.

editText: WritableSignal<string>
protectedreadonly inherited from NgDocListControl

The text of the field that edits an item in place.

elementRef: ElementRef<HTMLElement>
protectedreadonly inherited from DIControlValueAccessor
—
expanded: WritableSignal<boolean>
protectedreadonly inherited from NgDocListControl

Whether the reader asked for the dropdown, by typing, clicking or an arrow key.

freeText: true
protectedreadonly implements NgDocListControl

Whether typed text becomes an item (parseItem). Without it, the dropdown lists the values the items can have, and a value is in the array at most once.

highlighted: WritableSignal<number>
protectedreadonly inherited from NgDocListControl

The position of the highlighted row of the dropdown, or -1.

id: string
protectedreadonly inherited from NgDocListControl

The prefix of the IDs of the parts of the control.

incomingUpdate?: ((value: T | null) => void) | undefined
protectedreadonly inherited from DIControlValueAccessor
—
invalid: Signal<boolean>
protectedreadonly inherited from NgDocListControl

Whether the text field holds text that is not an item, such as a word in a number[].

items: Signal<readonly T[]>
protectedreadonly inherited from NgDocListControl

The items of the value; none when the value is not an array.

literal: Signal<string>
protectedreadonly inherited from NgDocListControl

The text shown instead of the items when the value is not an array (undefined or null), or is an empty array ([]), so that the two can be told apart. These are code, not words.

model: Signal<T | null>
protectedreadonly inherited from DIControlValueAccessor
—
ngControl: NgControl | null
protectedreadonly inherited from DIControlValueAccessor
—
panelOpen: Signal<boolean>
protectedreadonly inherited from NgDocListControl

Whether the dropdown is open: the reader asked for it and it has rows, or, for a union, says that no value matches the typed text.

panelWidth: WritableSignal<number>
protectedreadonly inherited from NgDocListControl

The width of the dropdown: the width of the field.

renderer: Renderer2
protectedreadonly inherited from DIControlValueAccessor
—
rows: Signal<NgDocListControlRow<T>[]>
protectedreadonly inherited from NgDocListControl

The rows of the dropdown: the values of candidates() whose text contains the typed text (the one equal to it first), and, when the typed text is an item that no row adds, a row that adds it, first.

shownItems: Signal<readonly T[]>
protectedreadonly inherited from NgDocListControl

The items as the chips show them: in the order of a drag in progress.

tabStop: WritableSignal<number>
protectedreadonly inherited from NgDocListControl

The position of the chip in the tab order; the others are reached with the arrow keys.

text: WritableSignal<string>
protectedreadonly inherited from NgDocListControl

The text of the text field.

protectedreadonly inherited from NgDocListControl
—
touch: () => void
protected inherited from DIControl

Function that should be used to make control touched.

Accessors

3
get disabled: boolean
inherited from DIControlValueAccessor

Returns true if the control is disabled.

set disabled: boolean
inherited from DIControlValueAccessor
—
get hasValue: boolean
inherited from DIControlValueAccessor

Returns true if the control is not empty.

Methods

24
(): void
protected inherited from NgDocListControl

Stops following the pointer; a drag in progress leaves the items as they were.

(): readonly T[]
protected inherited from NgDocListControl

The values that the dropdown can list, before the typed text filters them: for an array of strings or numbers, the items of the default and the removed items that the array doesn't hold. Plain arrays may hold an item twice, so typed text that is an item is added again, but the suggestions never repeat an item.

(…): void
protected inherited from NgDocListControl

Handles the keys of a focused chip.

(…): void
protected inherited from NgDocListControl

Starts to follow a pointer that went down on a chip.

(…): void
protected inherited from NgDocListControl

Drags the chip once the pointer has moved far enough, and moves it in front of or behind the chip under the pointer once the pointer passes that chip's middle.

(…): void
protected inherited from NgDocListControl

Drops a dragged chip: the items take the order of the drag.

(…): string
protected inherited from NgDocListControl

The text of a chip: the item's text, or "" for an empty string.

(): void
protected inherited from NgDocListControl

Ends an edit when its field loses the focus: with the text when it is an item.

(…): void
protected inherited from NgDocListControl

Handles the keys of the field that edits an item: Enter keeps the text, Escape the item.

(…): void
protected inherited from NgDocListControl

Opens the dropdown when the reader clicks the field, and focuses the text field when the click is not on a chip or a button.

(…): void
protected inherited from NgDocListControl

Handles the keys of the text field.

(…): string
protected inherited from NgDocListControl

The text of an item.

(…): void
protected inherited from NgDocListControl

Closes the dropdown and marks the control as touched when the focus leaves the control.

(): void
inherited from DIControl
—
(…): string
protected implements NgDocListControl

Reads typed text as an item.

(…): void
protected inherited from NgDocListControl

Picks a row of the dropdown: adds its value, or removes a picked value of a union.

(…): void
inherited from DIControl

Method is called by the forms API.

(…): void
protected inherited from NgDocListControl

Removes an item. The focus goes to the chip that takes its place, the previous chip, or the text field when the field had it, or no chip is left.

(): void
protected inherited from NgDocListControl

Sets the value back to the default of the input.

(…): string
protected inherited from NgDocListControl

The ID of a row of the dropdown, which the text field names as its active descendant.

(…): void
protected inherited from NgDocListControl

Edits an item in place: its chip becomes a text field.

(…): void
protected inherited from NgDocListControl

Reads the text field as the reader types.

(…): void
inherited from DIControl

Updates the model of the current control. This is the main method that should be used to update the model.

(…): void
inherited from DIControl

Method is called by the forms API to write to the view when programmatic changes from model to view are requested.

Symbol
Kind
Class
Decorators
@Component
Selectors
ng-doc-string-list-control
Extends
NgDocListControl<string>
Scope
@ng-doc/app
Edit this page