Angular ComboBox 구성 요소 개요

Angular ComboBox 구성 요소는 사용자가 미리 정의된 목록에서 여러 옵션을 선택할 수 있도록 편집 가능한 기능을 제공하는 드롭다운 목록을 나타냅니다. Ignite UI for Angular 필터링 기능, 그룹화 및 드롭다운 목록에 사용자 정의 값 추가도 제공합니다. HTML 선택 태그의 대안으로 사용할 수 있으며 데이터 바인딩(로컬 및 원격), 필터링, 그룹화, 항목에 대한 사용자 정의 템플릿, 머리글 및 바닥글, 사용자 정의 값, 그리고 더.

Angular ComboBox Example

이 Angular ComboBox 예에서는 사용자가 항목을 필터링하고 제공된 데이터를 사용하여 선택을 수행하는 방법을 확인할 수 있습니다. 또한 ComboBox는 키보드 탐색 및 사용자 정의 스타일 기능을 제공합니다.

Angular ComboBox Features

콤보박스 컨트롤은 다음 기능을 제공합니다.

• 데이터 바인딩 - 로컬 데이터 및 원격 데이터
• 값 바인딩
• 필터링
• 그룹화
• 맞춤 값
• 템플릿
• ​템플릿 기반 양식 및 반응형 양식 과의 통합

Getting Started with Ignite UI for Angular ComboBox

Ignite UI for Angular ComboBox 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxComboModule 당신의 app.module.ts 파일.

import { IgxComboModule } from 'igniteui-angular';
// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxComboModule,
        ...
    ]
})
export class AppModule {}

또는 16.0.0부터 IgxComboComponent 독립 실행형 종속성으로 가져오거나 IGX_COMBO_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.

// home.component.ts

import { IGX_COMBO_DIRECTIVES } from 'igniteui-angular';
// import { IGX_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-combo></igx-combo>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_COMBO_DIRECTIVES]
    /* or imports: [IgxComboComponent] */
})
export class HomeComponent {}

이제 Ignite UI for Angular 가져왔으므로 igx-combo 구성 요소 사용을 시작할 수 있습니다.

Using the Angular ComboBox Component

초기 설정 후 igx-combo를 데이터에 바인딩할 수 있습니다.

@Component({
    selector: 'app-combo-demo',
    template: '<igx-combo [data]="cities"></igx-combo>',
    styleUrls: ['combo-demo.component.scss'],
    standalone: true,
    imports: [IGX_COMBO_DIRECTIVES]
})
export class ComboDemo implements OnInit {
    public cities: { name: string, id: string }[] = [];

    public ngOnInit() {
        this.cities = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01'}, ...];
    }
}

우리의 콤보박스는 이제 도시 배열에 바인딩되었지만 항목의 텍스트에 사용할 속성과 값에 사용할 속성을 구성 요소에 아직 알려주지 않았습니다. 지금 해보자.

Data value and display properties

콤보박스는 복잡한 데이터(예: 개체)의 배열에 바인딩되어 있으므로 컨트롤이 선택한 항목을 처리하는 데 사용할 속성을 지정해야 합니다. 컨트롤은 두 개의 @Input 속성(valueKey 및 displayKey)을 노출합니다.

• valueKey-선택 사항, 객체 배열에 권장됨- 콤보 상자 선택을 위해 저장될 데이터 항목의 속성을 지정합니다. valueKey 생략하면 콤보박스 값은 데이터 항목에 대한 참조를 사용합니다(즉, 선택 항목은 igxCombo.data의 항목 배열이 됩니다).
• displayKey-객체 배열에 필수- 항목의 텍스트에 사용될 속성을 지정합니다. displayKey에 값이 지정되지 않으면 콤보박스는 지정된 valueKey (있는 경우)를 사용합니다.

우리의 경우 콤보박스에 각 도시의 name 표시되고 콤보박스 값에 각 도시의 id 저장되기를 원합니다. 따라서 콤보박스의 displayKey 및 valueKey에 각각 다음 속성을 제공합니다.

<igx-combo [data]="cities" displayKey="name" valueKey="id"></igx-combo>

Note

데이터 소스가 기본 요소의 배열인 경우(예: string[], number[]), 하지 마라 지정하다 valueKey 그리고 displayKey. 값과 텍스트 모두에 기본 값이 사용됩니다.

양방향 바인딩

콤보박스 구성 요소는 [(ngModel)]을 사용한 양방향 데이터 바인딩은 물론 템플릿 기반 및 반응 형 형식에서의 사용도 완벽하게 지원합니다. 콤보박스 선택은 양방향 바인딩이나 선택 API를 통해 접근할 수 있습니다. 콤보박스 선택 항목과 동일한 유형의 항목 배열(valueKey 기준)을 전달할 수 있으며, 하나가 변경될 때마다 다른 항목도 그에 따라 업데이트됩니다.

다음 예에서는 처음에 Sofia와 London이라는 도시가 선택됩니다. 콤보 상자 선택 항목의 추가 변경 사항은 selectedCities 배열에 반영됩니다.

<igx-combo [data]="cities" [(ngModel)]="selectedCities" displayKey="name" valueKey="id"></igx-combo>

export class MyCombo {
    public cities: { name: string, id: string }[] = [
                   { name: 'Sofia', id: 'BG01' }, { name: 'London', id: 'UK01' }, ...];
    public selectedCities: string[] = ['BG01', 'UK01'];
}

지정된 valueKey 없이 양방향 바인딩을 구현할 수도 있습니다. 예를 들어 valueKey 생략되면 바인딩된 모델은 다음과 같습니다.

export class MyCombo {
    public cities: { name: string, id: string } [] = [
                   { name: 'Sofia', id: 'BG01' }, { name: 'London', id: 'UK01' }, ...];
    public selectedCities: { name: string, id: string } [] = [this.cities[0], this.cities[1]];
}

Selection API

콤보박스 구성 요소는 컨트롤의 현재 선택 상태를 가져오고 조작할 수 있는 API를 노출합니다.

콤보박스의 선택을 얻는 한 가지 방법은 선택 속성을 이용하는 것입니다. 지정된 valueKey (있는 경우)에 따라 선택한 항목에 해당하는 값 배열을 반환합니다.

이 예에서 selection 선택한 도시의 id 배열을 반환합니다.

export class MyCombo {
    ...
    public selection: string[] = this.combo.selection;
}

선택 API를 사용하면 Observable 변경에 대한 응답으로 버튼 클릭을 통해 컨트롤과 사용자 상호 작용 없이 콤보박스의 선택된 항목을 변경할 수도 있습니다. 예를 들어 도시 집합을 선택하는 버튼을 구현할 수 있습니다. select() 메소드를 사용하여:

<igx-combo [data]="cities" displayKey="name" valueKey="id"></igx-combo>
<button igxButton (click)="selectFavorites()">Select Favorites</button>

버튼을 클릭하면 런던과 소피아 도시가 콤보박스 선택 항목에 추가됩니다.

export class MyExampleCombo {
    @ViewChild(IgxComboComponent, { read: IgxComboComponent, static: true })
    public combo: IgxComboComponent;
    ...
    selectFavorites(): void {
        this.combo.select(['UK01', 'BG01']);
    }
}

또한 콤보박스는 선택 항목이 변경될 때마다 이벤트(SelectionChanging() )를 발생시킵니다. 내보낸 이벤트 인수인 IComboSelectionChangingEventArgs 에는 변경 전 선택 항목, 현재 선택 항목, 추가되거나 제거된 항목에 대한 정보가 포함되어 있습니다. 이벤트를 취소하여 새 항목 배열로 선택 항목이 업데이트되지 않도록 할 수도 있습니다.

​igx-combo 태그의 적절한 @Output 속성을 통해 이벤트에 바인딩할 수 있습니다.

<igx-combo [data]="cities" displayKey="name" valueKey="id"
           (selectionChanging)="handleCityChange($event)">
</igx-combo>

다음 예에서는 도시가 선택 항목에 추가되거나 제거되면 통계 시각화를 업데이트하는 핸들러가 실행됩니다.

export class MyExampleCombo {
    ...
    handleCityChange(event: IComboSelectionChangeEventArgs): void {
        for (const item of event.added) {
            this.addToVisualization(item);
        }
        for (const item of event.removed) {
            this.removeFromVisualization(item);
        }
    }
}

Single Selection

기본적으로 콤보 컨트롤은 다중 선택을 제공합니다. 아래 스니펫은 selectionChanging 이벤트에 핸들러를 연결하여 구성 요소에서 단일 선택을 수행하는 방법을 보여줍니다.

<igx-combo [data]="lData" (selectionChanging)="singleSelection($event)"></igx-combo>

public singleSelection(event: IComboSelectionChangeEventArgs) {
    if (event.added.length) {
        event.newSelection = event.added;
    }
}

참고: 위에 표시된 것처럼 igxCombo를 수정하는 대신 igxSimpleCombo를 사용하는 것이 좋습니다.

Keyboard Navigation

콤보박스가 닫혀 있고 포커스가 있을 때:

• ArrowDown 또는 Alt + ArrowDown 콤보 상자의 드롭다운을 열고 포커스를 검색 입력으로 이동합니다.

콤보 상자가 열리고 검색 입력에 초점이 맞춰지면:

• ArrowUp 또는 Alt + ArrowUp 콤보 상자의 드롭다운을 닫고 포커스를 닫힌 콤보 상자로 이동합니다.

• ArrowDown 검색 입력에서 첫 번째 목록 항목으로 초점을 이동합니다. 목록이 비어 있고 사용자 정의 값이 활성화되어 있으면 목록이 새 항목 추가 버튼으로 이동됩니다.

Note

다른 키 입력은 입력에 의해 처리됩니다.

콤보박스가 열리고 목록 항목에 포커스가 있을 때:

• ArrowDown 다음 목록 항목으로 이동합니다. 활성 항목이 목록의 마지막 항목이고 사용자 정의 값이 활성화된 경우 포커스가 항목 추가 버튼으로 이동됩니다.

• ArrowUp 이전 목록 항목으로 이동합니다. 활성 항목이 목록의 첫 번째 항목인 경우 초점은 검색 입력으로 다시 이동됩니다.

• End 마지막 목록 항목으로 이동합니다.

• Home 첫 번째 목록 항목으로 이동합니다.

• Space 활성 목록 항목을 선택/선택 취소합니다.

• Enter 누르면 이미 선택한 항목이 확인되고 목록이 닫힙니다.

• Esc 누르면 목록이 닫힙니다.

콤보 상자가 열리면 사용자 정의 값 허용이 활성화되고 항목 추가 버튼에 초점이 맞춰집니다.

• Enter 검색 입력의 텍스트와 동일한 valueKey 및 displayKey 사용하여 새 항목을 추가하고 새 항목을 선택합니다.

• ArrowUp 포커스는 마지막 목록 항목으로 다시 이동하거나 목록이 비어 있으면 검색 입력으로 이동됩니다.

Angular ComboBox Styling

​Ignite UI for Angular 사용하면 콤보 상자 모양을 크게 변경할 수 있습니다. 먼저, 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 접근 방식에 따라 콤보 테마를 확장하고 $search-separator-border-color 매개변수를 허용하는 새 테마를 만듭니다.

$custom-combo-theme: combo-theme(
    $search-separator-border-color: #1a5214
);

​IgxComboComponent는 내부적으로 IgxDropDownComponent를 항목 컨테이너로 사용합니다. 또한 IgxInputGroup 및 IgxCheckbox 구성요소도 포함됩니다. 이러한 구성 요소의 테마를 확장하는 새 테마를 만들고 해당 클래스에서 범위를 지정하면 콤보 상자 스타일을 변경할 수 있습니다.

$custom-drop-down-theme: drop-down-theme(
    $background-color: #d9f5d6,
    $header-text-color: #1a5214,
    $item-text-color: #1a5214,

    $focused-item-background: #72da67,
    $focused-item-text-color: #1a5214,
    $hover-item-background: #a0e698,
    $hover-item-text-color: #1a5214,

    $selected-item-background: #a0e698,
    $selected-item-text-color: #1a5214,
    $selected-hover-item-background: #72da67,
    $selected-hover-item-text-color: #1a5214,
    $selected-focus-item-background: #72da67,
    $selected-focus-item-text-color: #1a5214,
);

$custom-checkbox-theme: checkbox-theme(
    $border-radius: 10px,
    $fill-color: #1a5214,
    $empty-color: #1a5214,
);

마지막 단계는 구성 요소의 테마를 포함하는 것입니다.

:host {
    @include css-vars($custom-combo-theme);
    @include css-vars($custom-drop-down-theme);
    @include css-vars($custom-checkbox-theme);
}

Note

​IgxCombo 구성 요소는 IgxOverlay 서비스를 사용하여 콤보 상자 항목 목록 컨테이너를 보유하고 표시합니다. 스타일의 범위를 적절하게 지정하려면 OverlaySetting.outlet을 사용해야 할 수도 있습니다. 자세한 내용은 IgxOverlay 스타일링 가이드를 확인하세요.

Note

​IgxCombo의 기본 type​ ​line 인 IgxSelect와 달리 box 입니다.

Demo

Known Issues

• 선택한 항목을 표시하는 콤보박스 입력은 편집할 수 없습니다. 그러나 FireFox의 브라우저 특성으로 인해 커서가 표시됩니다.
• 콤보 상자에는 높이 크기를 조정하기 위한 입력이 없습니다. 앞으로 IgxInputGroup 구성 요소는 사용자 정의 크기 조정을 허용하는 옵션을 제공할 것이며 IgxCombo는 적절한 스타일 지정 및 더 나은 일관성을 위해 동일한 기능을 사용할 것입니다.
• 콤보박스가 undefined (예 [ undefined, ...]) 포함된 기본 데이터 배열에 바인딩되면 undefined 드롭다운에 표시되지 않습니다. 복잡한 데이터(예: 개체)의 배열에 바인딩되어 있고 valueKey에 사용된 값이 undefined 경우 해당 항목은 드롭다운에 표시되지만 선택할 수는 없습니다.
• 콤보 상자가 원격 서비스에 바인딩되어 있고 미리 정의된 선택 항목이 있는 경우 해당 입력은 요청된 데이터가 로드될 때까지 공백으로 유지됩니다.

Note

콤보 상자는 내부적으로 igxForOf 지시문을 사용하므로 모든 igxForOf 제한 사항이 콤보 상자에 유효합니다. 자세한 내용은 igxForOf 알려진 문제 섹션을 참조하세요.

API Summary

• IgxCombo구성요소
• IgxCombo컴포넌트 스타일

사용된 관련 API가 포함된 추가 각도 구성요소 및/또는 지시어:

• IgxDropDown구성요소
• IgxInputGroupComponent
• IgxCheckbox구성요소

Theming Dependencies

• IgxDropDown 테마
• IgxIcon 테마
• IgxCheckbox 테마
• Igx오버레이 테마

Additional Resources

• 콤보박스 기능
• 콤보박스 원격 바인딩
• 콤보박스 템플릿
• 템플릿 기반 양식 통합
• 반응형 양식 통합
• 단일 선택 콤보박스

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub