NgDocListControl
The base of the playground controls of array inputs: a chip combobox. The items are chips, in one field with a text field after them. Enter adds the typed value, Backspace in the empty field removes the last chip, and the × of a chip removes it. A chip is dragged to another place, or moved with Alt+Left and Alt+Right while it is focused, and the arrow keys move between chips. While the reader types, a dropdown lists the matching suggestions; the arrow keys move its highlight, and Enter or a click picks a row. Escape closes it.
Subclasses decide what an item is: typed text (parseItem) for the arrays of strings and numbers, which suggest the input's default items and the items removed while the control is shown, or the values of a union, which the dropdown lists (
The control never changes an array it received: every edit reports a new array of plain values, so the value can be compared with the default and sent to an isolated demo as it is. An undefined or null value has no items and shows as such; the first added item makes it an array, and removing the last item leaves an empty array. Reset returns to the input's default, which is how an optional input gets back to undefined.
- Decorators
@Directive - Generic types
T- Extends
DIControl<T[] | undefined, T[] | undefined>- Implements
NgDocTypeControl <T[] | undefined>
@Directive ({ … })
export abstract class NgDocListControl <T extends NgDocListControlItem>
extends DIControl<T[] | undefined>
implements NgDocTypeControl <T[] | undefined> { … }- Extended by 3
NgDocStringListControlComponent NgDocNumberListControlComponent NgDocTypeAliasListControlComponent
Members
Properties31 | |||||||||||||||||
announcement: | What the live region announces: the new position of a moved item. | ||||||||||||||||
canReset: | Whether Reset is shown: the value differs from the default. | ||||||||||||||||
change: (value: T | null) => void | — | ||||||||||||||||
changeDetectorRef: | — | ||||||||||||||||
config?: DIControlConfig<TModel, TChildModel> | undefined | — | ||||||||||||||||
default: | Default value of the input; Reset returns to it. | ||||||||||||||||
disabledValue: | — | ||||||||||||||||
dragIndex: | The position of the chip being dragged, or | ||||||||||||||||
editing: | The position of the item edited in place, or | ||||||||||||||||
editInvalid: | Whether the field that edits an item holds text that is not an item. | ||||||||||||||||
editText: | The text of the field that edits an item in place. | ||||||||||||||||
elementRef: | — | ||||||||||||||||
expanded: | Whether the reader asked for the dropdown, by typing, clicking or an arrow key. | ||||||||||||||||
freeText: boolean | Whether typed text becomes an item ( | ||||||||||||||||
highlighted: | The position of the highlighted row of the dropdown, or | ||||||||||||||||
id: string | The prefix of the IDs of the parts of the control. | ||||||||||||||||
incomingUpdate?: ((value: T | null) => void) | undefined | — | ||||||||||||||||
invalid: | Whether the text field holds text that is not an item, such as a word in a | ||||||||||||||||
items: | The items of the value; none when the value is not an array. | ||||||||||||||||
literal: | The text shown instead of the items when the value is not an array ( | ||||||||||||||||
model: | — | ||||||||||||||||
ngControl: | — | ||||||||||||||||
panelOpen: | 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: | The width of the dropdown: the width of the field. | ||||||||||||||||
renderer: | — | ||||||||||||||||
rows: | The rows of the dropdown: the values of | ||||||||||||||||
shownItems: | The items as the chips show them: in the order of a drag in progress. | ||||||||||||||||
tabStop: | The position of the chip in the tab order; the others are reached with the arrow keys. | ||||||||||||||||
text: | The text of the text field. | ||||||||||||||||
texts: | — | ||||||||||||||||
touch: () => void | Function that should be used to make control touched. | ||||||||||||||||
Accessors3 | |||||||||||||||||
get disabled: boolean | Returns true if the control is disabled. | ||||||||||||||||
set disabled: boolean | — | ||||||||||||||||
get hasValue: boolean | Returns true if the control is not empty. | ||||||||||||||||
Methods24 | |||||||||||||||||
(): void | Stops following the pointer; a drag in progress leaves the items as they were. | ||||||||||||||||
Signature Returns void | |||||||||||||||||
(): readonly T[] | 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. | ||||||||||||||||
Signature Returns readonly T[] | |||||||||||||||||
(…): void | Handles the keys of a focused chip. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | Starts to follow a pointer that went down on a chip. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | 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. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | Drops a dragged chip: the items take the order of the drag. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): string | The text of a chip: the item's text, or | ||||||||||||||||
Signature Parameters
Returns string | |||||||||||||||||
(): void | Ends an edit when its field loses the focus: with the text when it is an item. | ||||||||||||||||
Signature Returns void | |||||||||||||||||
(…): void | Handles the keys of the field that edits an item: Enter keeps the text, Escape the item. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | 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. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | Handles the keys of the text field. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): string | The text of an item. | ||||||||||||||||
Signature Parameters
Returns string | |||||||||||||||||
(…): void | Closes the dropdown and marks the control as touched when the focus leaves the control. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(): void | — | ||||||||||||||||
Signature Returns voidOverloads
| |||||||||||||||||
(…): T | undefined | Reads typed text as an item. | ||||||||||||||||
Signature Parameters
Returns T | undefined -The item, or Overloads
| |||||||||||||||||
(…): void | Picks a row of the dropdown: adds its value, or removes a picked value of a union. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | Method is called by the forms API. | ||||||||||||||||
Signature Parameters
Returns voidOverloads
| |||||||||||||||||
(…): void | 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. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(): void | Sets the value back to the default of the input. | ||||||||||||||||
Signature Returns void | |||||||||||||||||
(…): string | The ID of a row of the dropdown, which the text field names as its active descendant. | ||||||||||||||||
Signature Parameters
Returns string | |||||||||||||||||
(…): void | Edits an item in place: its chip becomes a text field. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | Reads the text field as the reader types. | ||||||||||||||||
Signature Parameters
Returns void | |||||||||||||||||
(…): void | Updates the model of the current control. This is the main method that should be used to update the model. | ||||||||||||||||
Signature Parameters
Returns voidOverloads
| |||||||||||||||||
(…): void | Method is called by the forms API to write to the view when programmatic changes from model to view are requested. | ||||||||||||||||
Signature Parameters
Returns voidOverloads
| |||||||||||||||||