Listbox
디렉티브
사용자가 선택할 항목 목록을 표시하는 컨테이너입니다.
id
InputSignal<string>리스트박스의 고유 식별자입니다.
element
HTMLElement호스트 엘리먼트에 대한 참조입니다.
textDirection
Signal<Direction>텍스트 방향을 감싸는 시그널입니다.
orientation
InputSignal<"vertical" | "horizontal">목록이 세로 방향인지 가로 방향인지 지정합니다.
multi
InputSignalWithTransform<boolean, unknown>목록에서 여러 항목을 동시에 선택할 수 있는지 지정합니다.
wrap
InputSignalWithTransform<boolean, unknown>탐색할 때 포커스를 순환시킬지 지정합니다.
softDisabled
InputSignalWithTransform<boolean, unknown>비활성화된 항목이 포커스를 받을 수 있는지 지정합니다.
true이면 비활성화된 항목도 포커스를 받을 수 있지만 상호작용할 수는 없습니다.
false이면 탐색할 때 비활성화된 항목을 건너뜁니다.
focusMode
InputSignal<"roving" | "activedescendant">목록에서 사용하는 포커스 전략입니다.
roving:tabindex를 사용하여 활성 항목으로 포커스를 이동합니다.activedescendant: 포커스를 리스트박스 컨테이너에 유지하고aria-activedescendant로 활성 항목을 나타냅니다.
selectionMode
InputSignal<"follow" | "explicit">목록에서 사용하는 선택 전략입니다.
follow: 포커스를 받은 항목이 자동으로 선택됩니다.explicit: 사용자가 클릭하거나 스페이스바를 누르는 등의 방법으로 항목을 명시적으로 선택합니다.
typeaheadDelay
InputSignal<number>입력 문자 검색이 초기화되기 전까지의 시간입니다.
disabled
InputSignalWithTransform<boolean, unknown>리스트박스의 비활성화 여부입니다.
readonly
InputSignalWithTransform<boolean, unknown>리스트박스의 읽기 전용 여부입니다.
tabIndex
InputSignalWithTransform<number | undefined, string | number | undefined>리스트박스의 tabindex입니다.
value
ModelSignal<V[]>현재 선택된 항목의 값입니다.
activeDescendant
Signal<string | undefined>리스트박스의 활성 자손 ID입니다.
ngOnDestroy
void@returns
voidscrollActiveItemIntoView
void@paramoptions
ScrollIntoViewOptions@returns
voidgotoFirst
void리스트박스의 첫 번째 항목으로 이동합니다.
@returns
voidgotoIndex
void리스트박스에서 지정한 인덱스의 항목으로 이동합니다.
@paramindex
number@returns
void설명
사용자가 선택할 항목 목록을 표시하는 컨테이너입니다.
ngListbox는 ngOption 디렉티브와 함께 선택 가능한 목록을 만드는 데 사용합니다.
단일 선택과 다중 선택 모드, 다양한 포커스 및 방향 전략을 지원합니다.
<ul ngListbox [(value)]="selectedItems" [multi]="true" orientation="vertical">
@for (item of items; track item.id) {
<li ngOption [value]="item.id" [label]="item.name" [disabled]="item.disabled">
{{item.name}}
</li>
}
</ul>상세 내용으로 이동