Combobox
디렉티브
콤보박스 트리거 엘리먼트와 연결된 팝업 위젯을 조정하는 디렉티브입니다.
element
HTMLElement입력 엘리먼트에 대한 참조입니다.
disabled
InputSignalWithTransform<boolean, unknown>콤보박스의 비활성화 여부입니다.
readonly
InputSignalWithTransform<boolean, unknown>콤보박스의 읽기 전용 여부입니다.
softDisabled
InputSignalWithTransform<boolean, unknown>콤보박스가 포커스를 받을 수 있는 비활성화 상태인지 나타냅니다.
alwaysExpanded
InputSignalWithTransform<boolean, unknown>콤보박스를 항상 펼쳐진 상태로 유지할지 지정합니다.
tabIndex
InputSignalWithTransform<number | undefined, string | number | undefined>콤보박스의 tabindex입니다.
expanded
ModelSignal<boolean>콤보박스가 펼쳐져 있는지 나타냅니다.
value
ModelSignal<string>콤보박스 입력의 값입니다.
inlineSuggestion
InputSignal<string | undefined>입력에 표시할 인라인 제안입니다.
ngOnInit
void@returns
voidcontentVisible
WritableSignal<boolean>preserveContent
ModelSignal<boolean>설명
콤보박스 트리거 엘리먼트와 연결된 팝업 위젯을 조정하는 디렉티브입니다.
ngCombobox 디렉티브는 대화형 트리거 엘리먼트에 직접 적용합니다.
트리거에는 검색이나 자동 완성 동작에 사용하는 편집 가능한 <input> 또는 커스텀 선택 드롭다운에 사용하는 <div> 같은 편집 불가능한 엘리먼트를 사용할 수 있습니다.
포커스와 펼침 상태를 관리하고, 편집 가능한 경우 자동 완성 제안을 조정하며, 탐색 키를 활성 팝업으로 전달합니다.
예제 1: 편집 가능한 자동 완성 입력
<input ngCombobox #combobox="ngCombobox" [(value)]="searchQuery" [(expanded)]="isExpanded" />
<ng-template ngComboboxPopup [combobox]="combobox">
<div ngComboboxWidget #listbox="ngListbox" ngListbox [(value)]="selectedValues" [activeDescendant]="listbox.activeDescendant()">
<div ngOption value="first">First Option</div>
<div ngOption value="second">Second Option</div>
</div>
</ng-template>예제 2: 편집 불가능한 커스텀 선택 드롭다운
<div ngCombobox #combobox="ngCombobox" [(expanded)]="isExpanded" class="select-trigger">
{{selectedValue}}
</div>
<ng-template ngComboboxPopup [combobox]="combobox">
<div ngComboboxWidget #listbox="ngListbox" ngListbox [(value)]="selectedValues" [activeDescendant]="listbox.activeDescendant()">
<div ngOption value="first">First Option</div>
<div ngOption value="second">Second Option</div>
</div>
</ng-template>상세 내용으로 이동