import { DaffSelectComponent } from '@daffodil/design/select'
DaffSelectComponent is a form control component that presents a list of selectable options,
similar to the native <select> element we call <daff-native-select>.
@Component()
class DaffSelectComponent<<T = unknown>> extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnDestroy, ControlValueAccessor {
@Optional() @Self() ngControl: NgControl
@Input() options: T[] = []
@Input() optionsId: string = 'daff-select-options' + '-' + ++daffSelectOtionsId
open(event?: MouseEvent | KeyboardEvent): void
close(event?: MouseEvent | KeyboardEvent): void
selectOption(option: T): void
selectHighlighted(event?: MouseEvent | KeyboardEvent): void
highlightNext(event?: MouseEvent | KeyboardEvent): void
highlightPrevious(event?: MouseEvent | KeyboardEvent): void
}
T[]| Default | [] |
|---|---|
| Description |
string| Default | 'daff-select-options' + '-' + ++daffSelectOtionsId |
|---|---|
| Description | The unique id of the select options. Defaults to an autogenerated value. |
voidOpens the options list.
| Parameter | event: MouseEvent | KeyboardEvent |
|---|---|
| Description |
voidCloses the options list.
| Parameter | event: MouseEvent | KeyboardEvent |
|---|---|
| Description |
voidSelects an option.
| Parameter | option: T |
|---|---|
| Description |
voidSelects the option referenced by the highlighted index.
| Parameter | event: MouseEvent | KeyboardEvent |
|---|---|
| Description |
voidHighlights the next option in the list.
| Parameter | event: MouseEvent | KeyboardEvent |
|---|---|
| Description |
voidHighlights the previous option in the list.
| Parameter | event: MouseEvent | KeyboardEvent |
|---|---|
| Description |
import { DaffSelectOptionDirective } from '@daffodil/design/select'
The directive provides the template for a list of options inside the select dropdown.
@Directive()
class DaffSelectOptionDirective {
@Optional() templateRef: TemplateRef<unknown>
}
import { DaffSelectOptionDirectiveContext } from '@daffodil/design/select'
The slot context for DaffSelectOptionDirective.
interface DaffSelectOptionDirectiveContext<T = unknown> {
option: T
isSelected: boolean
isHighlighted: boolean
}
option T |
|---|
The option for this element in the list. |
isSelected boolean |
|---|
Whether this option is the currently selected one. |
isHighlighted boolean |
|---|
Whether this option is the currently highlighted one in the options list. |
import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select'
const DAFF_SELECT_COMPONENTS: readonly [typeof DaffSelectComponent, typeof DaffSelectOptionDirective]