ListItemDirective
Directive for list items. It is used in the yuvList component to keep track of active and selected items. Every element with this directive will be treated as a list item and can be selected and focused.
Example :
<yuv-list (itemSelect)="itemSelected($event)">
<div yuvListItem>Entry #1</div>
<div yuvListItem>Entry #2</div>
</yuv-list>Directive Metadata
Section titled “Directive Metadata”Selector: [yuvListItem]
Standalone: Yes
Implements: Highlightable, AfterViewInit
Inputs
Section titled “Inputs”disabled
Section titled “disabled”Type: boolean | undefined
active
Section titled “active”Type: boolean
Default Value: false
Whether the item is active or not.
selected
Section titled “selected”Type: boolean
Default Value: false
Whether the item is selected or not.
Properties
Section titled “Properties”activeInput
Section titled “activeInput”Type: unknown
Default Value: linkedSignal(\{ source: this.active, computation: (newOptions: any, previous: any) => (newOptions !== previous ? newOptions : previous) \})
focusableChildren
Section titled “focusableChildren”Type: Element[]
Default Value: []
focusedIndex
Section titled “focusedIndex”Type: unknown
Default Value: -1
onClick
Section titled “onClick”Type: function
selectedInput
Section titled “selectedInput”Type: unknown
Default Value: linkedSignal(\{ source: this.selected, computation: (newOptions: any, previous: any) => (newOptions !== previous ? newOptions : previous) \})
Methods
Section titled “Methods”focusNext
Section titled “focusNext”focusNext(): voidfocusPrevious
Section titled “focusPrevious”focusPrevious(): voidonHostClick
Section titled “onHostClick”onHostClick(evt: MouseEvent): voidArguments
Section titled “Arguments”| Name | Type | Description |
|---|---|---|
| evt | MouseEvent |
setActiveStyles
Section titled “setActiveStyles”setActiveStyles(): voidsetInactiveStyles
Section titled “setInactiveStyles”setInactiveStyles(): void