Angular ComboBox 구성 요소 개요

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

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/combo';
// 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/combo';
// 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 Combo 모듈이나 디렉티브를 가져왔으니, 컴포넌트를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 하나가 변경될 때마다 다른 항목도 그에 맞게 업데이트됩니다.

다음 예시에서는 소피아와 런던 두 도시가 처음에 선택됩니다. 콤보박스 선택에 추가 변화가 있으면 배열에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 에는 변경 전 선택 항목, 현재 선택 항목, 추가되거나 제거된 항목에 대한 정보가 포함되어 있습니다. 이벤트를 취소하여 새 항목 배열로 선택 항목이 업데이트되지 않도록 할 수도 있습니다.

이벤트에 묶이는 태그의 적절한@Output 속성을igx-combo 통해 가능합니다:

<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.newValue = event.added;
    }
}

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

Keyboard Navigation

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

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

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

• ArrowUp또는Alt +ArrowUp는 콤보박스의 드롭다운을 닫고 포커스를 닫은 콤보박스로 이동시킵니다.

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

Note

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

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

• ArrowDown다음 목록 항목으로 넘어갑니다. 활성 항목이 목록에서 마지막이고 사용자 지정 값이 활성화되어 있다면, 초점은 항목 추가(Add item) 버튼으로 이동합니다.

• ArrowUp이전 목록 항목으로 이동합니다. 활성 항목이 목록에서 첫 번째라면, 초점은 다시 검색 입력으로 이동합니다.

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

• Home첫 번째 목록 항목으로 이동할 예정입니다.

• Space활성 목록 항목을 선택/해제합니다.

• Enter이미 선택된 항목을 확인하고 목록을 닫습니다.

• Esc목록을 마무리할 것입니다.

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

• Enter검색 입력에서 텍스트와 같은 새 항목을valueKey​displayKey 추가하고 새 항목을 선택합니다.

• ArrowUp초점은 마지막 목록 항목으로 다시 이동하거나, 목록이 비어 있으면 검색 입력으로 이동합니다.

스타일링

Combo Theme Property Map

주요 속성을 수정하면 관련된 모든 종속 속성이 자동으로 업데이트됩니다:

기본 속성	종속 속성	설명
$empty-목록-배경	$empty-list-placeholder-color	조합된 임시 텍스트 색상.
$toggle-버튼-배경	$toggle-버튼-전경	콤보 토글 버튼의 전경 색상.
	$toggle-버튼-배경-초점	콤보 토글 버튼은 초점을 맞춰 있을 때 배경색이 나옵니다.
	$toggle-버튼-배경-초점--테두리	콤보 토글 버튼 배경색은 초점 맞추면 (테두리 변형)
	$toggle 버튼 전경 채우기	콤보 토글 버튼은 채워질 때 전경 색상을 사용합니다.
	$toggle-버튼-배경-비활성화	콤보 토글 버튼은 비활성화 시 배경색이 됩니다.
	$toggle 버튼-전경-비활성화	콤보 토글 버튼은 비활성화 시 전경 색상을 표시합니다.
$toggle-버튼-배경-초점	$toggle 버튼-전경-초점	콤보 토글 버튼은 초점을 맞출 때 전경 색상을 조절합니다.
$clear-버튼-배경-초점	$clear 버튼-전경-초점	콤보 버튼은 초점을 맞추면 전경 색상을 클리어합니다.

을 사용하면Ignite UI for Angular Theming 조합 박스의 외관을 크게 변경할 수 있습니다. 먼저, 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 파일을 가져와index야 합니다:

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

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

가장 간단한 접근법을 따르면, 우리는 새로운combo-theme 주제를 만들어 확장합니다. 를$toggle-button-background 설정하면 테마가 버튼에 적합한 상태 색상과 대비 전경을 자동으로 결정합니다. 또한 다음과 같은$search-separator-border-color 추가 매개변수를 지정할 수도 있습니다:

$custom-combo-theme: combo-theme(
  $search-separator-border-color: #1d3743,
  $toggle-button-background: #57a5cd,
);

​IgxComboComponent내부적으로 아이템 용기로 사용합니다IgxDropDownComponent. 또한 과IgxInputGroup​IgxCheckbox 구성 요소도 포함됩니다. 이 구성 요소들의 테마를 확장하는 새로운 테마를 만들고 해당 클래스에 스코핑하면 콤보박스 스타일을 변경할 수 있습니다:

$custom-drop-down-theme: drop-down-theme(
  $background-color: #57a5cd,
);

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

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

:host ::ng-deep {
  @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 Styling Guide 또한 컴포넌트를 스타일링할 때 꼭 사용해야::ng-deep 합니다.

Note

기본 설정type​IgxCombo 이야.box 반면IgxSelect 어디에 있는지도line.

Demo

Styling with Tailwind

저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일combo 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-combo​dark-combo 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

콤 보 테마에서 전체 부동산 목록을 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-combo
class="!light-combo
![--toggle-button-background:#99BAA6]
![--clear-button-foreground:#99BAA6]"
...></igx-combo>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 콤보는 이렇게 보여야 합니다:

Known Issues

• 선택한 항목을 표시하는 콤보박스 입력은 편집할 수 없습니다. 그러나 FireFox의 브라우저 특성으로 인해 커서가 표시됩니다.
• 콤보박스가 드롭다운에 표시되지 않는 원시 데이터undefined​[ undefined, ...]​undefined 배열에 바인딩되어 있을 때, 복잡한 데이터(즉, 객체) 배열에 바인딩되어 있고 에valueKey 사용되는 값이 isundefined 일 때, 아이템은 드롭다운에 표시되지만 선택할 수는 없습니다.
• 콤보 상자가 원격 서비스에 바인딩되어 있고 미리 정의된 선택 항목이 있는 경우 해당 입력은 요청된 데이터가 로드될 때까지 공백으로 유지됩니다.

Note

콤보박스는 내부적으로 지시를 사용igxForOf 하므로 모든igxForOf 제한이 유효합니다. 자세한 내용은 섹션을 참조하세요igxForOf Known Issues.

API Summary

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

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

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

Theming Dependencies

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

Additional Resources

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

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

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