Angular Single Select ComboBox 구성 요소 개요
Angular Single Select ComboBox 구성 요소는 단일 선택을 허용하는 ComboBox 구성 요소의 수정판입니다. 우리는 이것을 "단순 콤보"라고 부릅니다. 원래 ComboBox 구성 요소에 대한 단일 선택 모드에 대한 수요가 높아서, 사용자가 미리 정의된 항목 목록에서 옵션을 선택하고 사용자 지정 값을 입력할 수 있는 편집 가능한 검색 입력을 제공하는 확장 구성 요소를 만들었습니다.
Angular Simple ComboBox 예제
이 Angular Simple ComboBox 예제에서는 사용자가 차트의 추세선 유형을 선택하는 방법을 볼 수 있습니다. 또한 Simple ComboBox는 키보드 탐색 및 사용자 지정 스타일 기능을 제공합니다.
Angular Simple ComboBox 기능
간단한 콤보박스 컨트롤은 다음 기능을 제공합니다. - 데이터 바인딩 - 로컬 데이터 및 원격 데이터 - 값 바인딩 - 필터링 - 그룹화 - 사용자 정의 값 - 템플릿 - 템플릿 기반 양식 및 반응형 양식과의 통합
Ignite UI for Angular Simple ComboBox 시작하기
Ignite UI for Angular Simple ComboBox 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxSimpleComboModule 당신의 app.module.ts 파일.
import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
// import { IgxSimpleComboModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxSimpleComboModule,
...
]
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져오IgxSimpleComboComponent 거나, 토큰을IGX_SIMPLE_COMBO_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.
// home.component.ts
import { IGX_SIMPLE_COMBO_DIRECTIVES } from 'igniteui-angular/simple-combo';
// import { IGX_SIMPLE_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-simple-combo></igx-simple-combo>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_SIMPLE_COMBO_DIRECTIVES]
/* or imports: [IgxSimpleComboComponent] */
})
export class HomeComponent {}
이제 Ignite UI for Angular Simple ComboBox 모듈이나 디렉티브를 가져왔으니, 컴포넌트igx-simple-combo 사용을 시작할 수 있습니다.
Angular Simple ComboBox 사용
일반 콤보박스와 마찬가지로 igx-simple-combo를 데이터에 바인딩할 수 있습니다.
export class MySimpleComboComponent implements OnInit {
public cities: City[];
public ngOnInit() {
this.cities = getCitiesByPopulation(10000000);
}
}
<igx-simple-combo [data]="cities"></igx-simple-combo>
이제 간단한 콤보박스가 도시 배열에 바인딩되었습니다.
데이터 값 및 표시 속성
간단한 콤보박스는 복잡한 데이터(즉, 객체) 배열에 바인딩되어 있기 때문에, 컨트롤이 선택한 항목을 처리하는 데 사용할 속성을 지정해야 합니다. 이 컨트롤은 두 가지@Input 속성인 -valueKey와 displayKey를 노출합니다:
valueKey-선택 사항, 객체 배열에 권장 됨 - 단순 콤보박스 선택에 저장할 데이터 항목 속성을 지정합니다. 만약 를 생략하면valueKey, 단순 콤보박스 값은 데이터 항목에 대한 참조를 사용하게 됩니다(즉, 선택 항목은 다음igxSimpleCombo.data항목들의 배열이 됩니다).displayKey-객체 배열에 필수- 항목 텍스트에 사용할 속성을 지정합니다. 만약 에displayKey대한 값이 지정되지 않았다면, 단순 조합 박스는 지정된valueKey값을 사용합니다(있다면).
저희 경우, 각 도시의 단순 콤보박스는 를name 표시하고, 그 값은 각 도시의 값을id 저장하는 용도로 사용하길 원합니다. 따라서 이 속성들을 각각 단순 콤보박스와displayKeyvalueKey에 값으로 묶고 있습니다:
<igx-simple-combo [data]="cities" [displayKey]="'name'" [valueKey]="'id'"></igx-simple-combo>
메모
데이터 소스가 단순 유형(예:string[],number[]), 안 함 명시:valueKey 그리고displayKey.
양방향 바인딩
간단한 콤보박스 컴포넌트는 다음과 같은 양방향 데이터 바인딩을 완벽하게 지원합니다.[(ngModel)] 그리고 템플릿 구동 그리고 반응성 형태. 간단한 콤보박스 선택은 양방향 바인딩을 통해 또는 선택 API. 간단한 콤보박스 선택에 있는 항목과 같은 유형의 아이템을 넣을 수 있습니다 (다음을 기반으로 하면)valueKey 그리고 한 쪽이 바뀔 때마다 다른 쪽도 그에 맞게 업데이트됩니다.
다음 예시에서는 제공된 데이터 내 첫 번째 도시가 처음에 선택됩니다. 간단한 콤보박스 선택에 추가로 변경이 있을 경우 해당selectedCities 부분에 반영됩니다.
<igx-simple-combo [data]="cities" [(ngModel)]="selectedCity" [displayKey]="'name'" [valueKey]="'id'"></igx-simple-combo>
export class MySimpleComboComponent implements OnInit {
public cities: City[];
public selectedCity: number;
public ngOnInit(): void {
this.cities = getCitiesByPopulation(10000000);
this.selectedCity = this.cities[0].id;
}
}
양방향 바인딩은 별도의 지정valueKey 없이도 달성할 수 있습니다. 예를 들어, 를 생략하면valueKey 결합 모델은 다음과 같다:
export class MySimpleComboComponent {
public cities: City[] = [
{ name: 'Sofia', id: '1' }, { name: 'London', id: '2' }, ...];
public selectedCity: City = this.cities[0];
}
선택 API
간단한 콤보박스 구성 요소는 컨트롤의 현재 선택 상태를 가져오고 조작할 수 있는 API를 노출합니다.
선택을 얻는 한 가지 방법은 선택 속성을 이용하는 것입니다. 지정된 valueKey (있는 경우)에 따라 선택한 항목에 해당하는 값을 반환합니다.
예시에서 는selection 선택된 도시의 값을id 반환합니다:
export class MySimpleComboComponent {
...
public selection: string = this.simpleCombo.selection;
}
선택 API를 사용하면 Observable 변경에 대한 응답으로 버튼 클릭을 통해 컨트롤과 사용자 상호 작용 없이 간단한 콤보 상자의 선택된 항목을 변경할 수도 있습니다. 예를 들어 다음을 사용하여 도시를 선택하는 버튼을 구현할 수 있습니다. 선택 방법:
<igx-simple-combo [data]="cities" [displayKey]="'name'" [valueKey]="'id'"></igx-simple-combo>
<button igxButton (click)="selectFavorite()">Select Favorite</button>
버튼을 클릭하면London 간단한 콤보박스 선택에 추가됩니다:
export class MySimpleComboComponent {
@ViewChild(IgxSimpleComboComponent, { read: IgxSimpleComboComponent, static: true })
public simpleCombo: IgxSimpleComboComponent;
...
selectFavorites(): void {
this.simpleCombo.select('2');
}
}
또한 간단한 콤보박스는 선택 항목이 변경될 때마다 이벤트(SelectionChanging )를 발생시킵니다. 내보낸 이벤트 인수인 ISimpleComboSelectionChangingEventArgs 에는 변경 전 선택 사항, 현재 선택 사항 및 표시된 항목에 대한 정보가 포함되어 있습니다. 이벤트가 취소되어 선택이 이루어지지 않을 수도 있습니다.
이벤트에 묶이는 태그의 적절한@Output 속성을igx-simple-combo 통해 가능합니다:
<igx-simple-combo [data]="cities" [displayKey]="'name'" [valueKey]="'id'"
(selectionChanging)="handleCityChange($event)">
</igx-simple-combo>
키보드 탐색
단순 콤보박스가 닫히고 포커스가 맞춰진 경우:
ArrowDown또는Alt+ArrowDown가 간단한 콤보박스의 드롭다운을 엽니다.
메모
다른 키 입력은 입력에 의해 처리됩니다.
간단한 콤보 상자가 열리고 목록의 항목에 초점이 맞춰지면:
ArrowDown다음 목록 항목으로 넘어갑니다. 활성 항목이 목록에서 마지막이고 사용자 지정 값이 활성화되어 있다면, 초점은 항목 추가(Add item) 버튼으로 이동합니다.ArrowUp이전 목록 항목으로 이동합니다. 활성 항목이 목록에서 첫 번째라면, 초점은 검색 입력으로 다시 이동하면서 입력 내 모든 텍스트를 선택합니다.End마지막 목록 항목으로 이동합니다.Home첫 번째 목록 항목으로 이동할 예정입니다.Space활성 목록 항목을 선택/해제합니다.Enter활성 목록 항목을 선택/해제하고 목록을 닫습니다.Esc목록을 마무리할 것입니다.
단순 콤보 상자가 열리고 사용자 정의 값 허용이 활성화되고 항목 추가 버튼에 초점이 맞춰진 경우:
Enter검색 입력에서 텍스트와 같은 새 항목을valueKeydisplayKey추가하고 새 항목을 선택합니다.ArrowUp초점을 마지막 목록 항목으로 다시 이동시키거나, 목록이 비어 있으면 입력으로 초점을 옮깁니다.
계단식 시나리오
다음 샘플은 igx-simple-combo가 사용되는 시나리오를 보여줍니다.
Cascading Combos 샘플을 Angular 보세요.
템플릿 구성
간단한 콤보박스의 API는 한 구성 요소에서 선택한 항목을 가져오고 다음 구성 요소의 데이터 소스를 로드할 뿐만 아니라 필요할 때 선택 항목과 데이터 소스를 지우는 데 사용됩니다.
<igx-simple-combo #country
[data]="countriesData"
(selectionChanging)="countryChanging($event)"
placeholder="Choose Country..."
[(ngModel)]="selectedCountry"
[displayKey]="'name'">
</igx-simple-combo>
<igx-simple-combo #region
[data]="regionData"
(selectionChanging)="regionChanging($event)"
placeholder="Choose Region..."
[(ngModel)]="selectedRegion"
[displayKey]="'name'"
[disabled]="regionData.length === 0">
</igx-simple-combo>
<igx-simple-combo #city
[data]="citiesData"
placeholder="Choose City..."
[(ngModel)]="selectedCity"
[displayKey]="'name'"
[disabled]="citiesData.length === 0">
</igx-simple-combo>
구성 요소 정의
export class SimpleComboCascadingComponent implements OnInit {
public selectedCountry: Country;
public selectedRegion: Region;
public selectedCity: City;
public countriesData: Country[];
public regionData: Region[] = [];
public citiesData: City[] = [];
public ngOnInit(): void {
this.countriesData = getCountries(['United States', 'Japan', 'United Kingdom']);
}
public countryChanging(e: ISimpleComboSelectionChangingEventArgs) {
this.selectedCountry = e.newSelection as Country;
this.regionData = getCitiesByCountry([this.selectedCountry?.name])
.map(c => ({name: c.region, country: c.country}))
.filter((v, i, a) => a.findIndex(r => r.name === v.name) === i);
this.selectedRegion = null;
this.selectedCity = null;
this.citiesData = [];
}
public regionChanging(e: ISimpleComboSelectionChangingEventArgs) {
this.selectedRegion = e.newSelection as Region;
this.citiesData = getCitiesByCountry([this.selectedCountry?.name])
.filter(c => c.region === this.selectedRegion?.name);
this.selectedCity = null;
}
}
Angular Simple ComboBox 원격 바인딩
Ignite UI for Angular 콤보박스를 원격 서비스에 바인딩하고 필요에 따라 데이터를 검색할 수 있는 API를 제공합니다.
데모
아래 샘플은 dataPreLoad 속성을 사용하여 원격 데이터의 새 청크를 로드하고 ComboBox 원격 바인딩에 설명된 단계를 따르는 원격 바인딩을 보여줍니다.
스타일링
을 사용하면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를 확장하고 다음을$empty-list-background 받아들이는 새로운 주제를 만듭니다:
$custom-simple-combo-theme: combo-theme(
$empty-list-background: #1a5214
);
IgxSimpleComboComponent내부적으로 아이템 용기로 사용합니다IgxDropDownComponent. 또한 구성 요소도IgxInputGroup 포함되어 있습니다. 이 구성 요소들의 테마를 확장하는 새로운 테마를 만들고, 해당 클래스별로 범위를 지정하면 간단한 콤보박스 스타일을 변경할 수 있습니다:
$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,
);
마지막 단계는 구성 요소의 테마를 포함하는 것입니다.
:host ::ng-deep {
@include css-vars($custom-combo-theme);
@include css-vars($custom-drop-down-theme);
}
메모
컴포넌트는IgxSimpleCombo이 서비스를 이용IgxOverlay 해 간단한 콤보박스 아이템 목록 컨테이너를 저장하고 표시합니다. 스타일을 제대로 파악하려면 아마도OverlaySetting.outlet 자세한 내용은 다음을 참조하세요.IgxOverlay Styling Guide 또한 컴포넌트를 스타일링할 때 꼭 사용해야::ng-deep 합니다.
메모
기본 설정typeIgxSimpleCombo 이야.box 반면IgxSelect 어디에 있는지도line.
데모
알려진 문제
- 단순 콤보박스에는 높이 크기를 조정하기 위한 입력이 없습니다. 앞으로 IgxInputGroup 구성 요소는 사용자 정의 크기 조정을 허용하는 옵션을 제공할 것이며 IgxSimpleCombo는 적절한 스타일 지정 및 더 나은 일관성을 위해 동일한 기능을 사용할 것입니다.
- 단순 콤보박스가 원시 데이터 배열에 바인딩되어 있고,
undefined[ undefined, ...]undefined이 배열은 드롭다운에 표시되지 않습니다. 복잡한 데이터(즉, 객체) 배열에 바인딩되어 있고 에valueKey사용되는 값이 isundefined일 때, 아이템은 드롭다운에 표시되지만 선택할 수는 없습니다. - 단순 콤보박스가 바
ngModel인딩되어 있고 가 표시되어 있을required때,nullundefined''그리고 값을 선택할 수 없습니다. - 단순 콤보 상자가 원격 서비스에 바인딩되어 있고 미리 정의된 선택 항목이 있는 경우 해당 입력은 요청된 데이터가 로드될 때까지 공백으로 유지됩니다.
메모
심플 콤보박스는 내부적으로 지시를 사용igxForOf 하므로 모든igxForOf 제한이 심플 콤보박스에 유효합니다. 자세한 내용은 igxForOf Known Issues 섹션을 참조하세요.
API 요약
사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:
테마 종속성
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub