--- title: Angular Combobox コンポーネント | データ バインディング ComboBox | インフラジスティックス | MITライセンス description: Ignite UI for Angular ComboBox は、基本的な HTML 入力、選択、フィルタリング、およびカスタム ドロップダウン リストの機能を組み合わせた強力な入力を提供します。無料でお試しください。 keywords: angular combobox, angular combo コンポーネント, angular combobox コンポーネント, Angular UI コンポーネント, ignite ui for angular, インフラジスティックス license: MIT _language: ja --- # Angular ComboBox (コンボボックス) コンポーネントの概要 Angular ComboBox コンポーネントは、編集可能な機能を提供するドロップダウン リストを表し、ユーザーが事前定義されたリストからオプションを選択できるようにします。Ignite UI for Angular ComboBox コンポーネントは、フィルタリング機能、項目の選択、グループ化、ドロップダウン リストにカスタム値の追加などの機能をサポートします。HTML select タグの代わりに使用でき、データ バインディング (ローカルおよびリモート)、フィルタリング、グループ化、カスタム テンプレート、カスタム値など、すぐに使用できる機能がいくつかあります。 ## Angular ComboBox の例 この Angular ComboBox の例では、ユーザーが項目をフィルターし、提供されたデータを使用して選択を実行する方法を表します。さらに、ComboBox は、キーボード ナビゲーションとカスタム スタイル設定機能を公開します。
## Angular ComboBox 機能 コンボボックス コントロールは以下の機能を公開します。 - データ バインディング- ローカル データおよび[リモート データ](combo-remote.md) - [値バインディング](combo-features.md#データ-バインディング) - [フィルタリング](combo-features.md#フィルタリング) - [グループ化](combo-features.md#グループ化) - [カスタム値](combo-features.md#カスタム値) - [テンプレート](combo-templates.md) - [テンプレート駆動フォーム](input-group.md)および[リアクティブ フォーム](angular-reactive-form-validation.md)との統合 - Data Binding - local data and [remote data](/combo-remote) - [Value Binding](/combo-features#data-binding) - [Filtering](/combo-features#filtering) - [Grouping](/combo-features#grouping) - [Custom Values](/combo-features#custom-values) - [Templates](/combo-templates) - Integration with [Template Driven Forms](/input-group) and [Reactive Forms](/angular-reactive-form-validation) ## Ignite UI for Angular ComboBox を使用した作業の開始 Ignite UI for Angular ComboBox コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。 ```cmd ng add igniteui-angular ``` Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 次に、**app.module.ts** ファイルに `IgxComboModule` をインポートします。 ```typescript // import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ imports: [ ... IgxComboModule, ... ] }) export class AppModule {} ``` あるいは、`16.0.0` 以降、`IgxComboComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/combo/src/combo/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 ```typescript // home.component.ts // import { IGX_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @Component({ selector: 'app-home', template: '', styleUrls: ['home.component.scss'], standalone: true, imports: [IGX_COMBO_DIRECTIVES] /* or imports: [IgxComboComponent] */ }) export class HomeComponent {} ``` Ignite UI for Angular Combo モジュールまたはディレクティブをインポートしたので、`igx-combo` コンポーネントの使用を開始できます。 ## Angular ComboBox コンポーネントの使用 初期設定後、をいくつかのデータにバインドします。 ```typescript @Component({ selector: 'app-combo-demo', template: '', 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'}, ...]; } } ``` コンボボックスは都市の配列にバインドされましたが、項目のテキストにどのプロパティを使用するか、値にどのプロパティを使用するかをコンポーネントにまだ伝えていません。実際に変更してみましょう。 ### データ値と表示プロパティ コンボボックスは複雑なデータ (オブジェクト) の配列にバインドされているため、選択したアイテムを処理するためにコントロールが使用するプロパティを指定する必要があります。コントロールは、と の 2 つの `@Input` プロパティを公開します。 - `valueKey` - **オプション、オブジェクト配列に推奨。** - コンボボックスの選択のために保存されるデータ エントリのプロパティを指定します。`valueKey` が省略された場合、コンボボックス値はデータ エントリへの参照を使用します (選択は `igxCombo.data` からのエントリの配列になります)。 - `displayKey` - **オブジェクト配列に必須。** - アイテムのテキストに使用するプロパティを指定します。`displayKey` に値が指定されていない場合、コンボボックスは指定された `valueKey` (存在する場合) を使用します。 この例では、コンボボックスに各都市の `name` を表示し、コンボボックス値には各都市の `id` を格納します。格納するには、これらのプロパティをコンボボックスの`displayKey` と `valueKey` にそれぞれ提供します。 ```html ``` データ ソースがプリミティブの配列 (`string[]`、`number[]` など) の場合、`valueKey` と `displayKey` を**指定しないでください**。プリミティブ値は値とテキストの両方に使用されます。 ### 双方向バインディング コンボボックス コンポーネントは、`[(ngModel)]` との双方向のデータ バインディングを完全にサポートし、[テンプレート駆動型](https://angular.io/guide/forms)および[リアクティブ型](https://angular.io/guide/reactive-forms)での使用もサポートします。コンボボックス選択には、双方向バインディングまたは[選択 API](#選択-api)を使用してアクセスできます。コンボボックスの選択項目 (`valueKey` に基づく) と同じタイプの項目の配列を渡すことができ、いずれかが変更されるたびに、他方がそれに応じて更新されます。 以下の例は、cities の Sofia と London があらかじめ選択済みになります。コンボボックスの選択におけるそれ以上の変更は、`selectedCities` 配列に反映されます。 ```html ``` ```typescript export class MyCombo { public cities: { name: string, id: string }[] = [ { name: 'Sofia', id: 'BG01' }, { name: 'London', id: 'UK01' }, ...]; public selectedCities: string[] = ['BG01', 'UK01']; } ``` `valueKey` を指定しない場合も双方向バインディングを設定できます。たとえば、`valueKey` を省略すると、バインドされたモデルは次のようになります。 ```typescript 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]]; } ``` ### 選択 API コンボボックス コンポーネントは、コントロールの現在の選択状態を取得および操作できる API を公開します。 コンボボックスの選択を取得する 1 つの方法は、プロパティを使用することです。指定された [valueKey](#data-value-and-display-properties) (存在する場合) に応じて、選択された項目に対応する値の配列を返します。 例では、`selection` は選択された都市の `id` の配列を返します。 ```typescript export class MyCombo { ... public selection: string[] = this.combo.selection; } ``` 選択 API を使用すると、コントロールのユーザー操作なしで、コンボボックスの選択された項目を変更できます - ボタン クリックを介して、Observable 変更への応答としてなどです。たとえば、メソッドを使用して複数の都市を選択するボタンを実装できます。 ```html ``` ボタンをクリックすると、都市 London と Sofia がコンボボックスの選択に追加されます。 ```typescript export class MyExampleCombo { @ViewChild(IgxComboComponent, { read: IgxComboComponent, static: true }) public combo: IgxComboComponent; ... selectFavorites(): void { this.combo.select(['UK01', 'BG01']); } } ``` また、コンボボックスは、選択が変更されるたびにイベントを発生させます - 。発行されたイベント引数 には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。また、イベントをキャンセルして、新しいアイテムの配列で選択を更新できないようにすることもできます。 イベントへのバインドは、`igx-combo` タグの適切な `@Output` プロパティを介して実行できます。 ```html ``` 以下の例では、都市が選択に追加または選択から削除されると、統計の可視化を更新するハンドラーが発生します。 ```typescript export class MyExampleCombo { ... handleCityChange(event: IComboSelectionChangingEventArgs): void { for (const item of event.added) { this.addToVisualization(item); } for (const item of event.removed) { this.removeFromVisualization(item); } } } ``` また、コンボボックスは、選択が確定されてコンポーネントの状態が更新された後に イベントを発生させます。発行されたイベント引数 には、以前の選択、現在の選択、および追加または削除されたアイテム に関する情報が含まれています。`selectionChanging` とは異なり、このイベントはキャンセル不可であり、最終的に確定した選択の状態を反映することが保証されています。コンボボックスが `ngModel` や Angular フォームとともに使用される場合、`selectionChanged` は値変更コールバックが呼び出された後に発行されます。 イベントへのバインドは、`igx-combo` タグの適切な `@Output` プロパティを介して行うことができます。 ```html ``` 次の例では、選択が変更されると、ハンドラーが短い要約を更新し、追加および削除されたアイテムの数を追跡します。 ```typescript export class MyExampleCombo { ... handleCitySelectionChanged(event: IComboSelectionChangedEventArgs): void { this.updateSelectionSummary(event.displayText, event.newSelection.length); for (const item of event.added) { this.highlightAddedCity(item); } for (const item of event.removed) { this.dimRemovedCity(item); } this.logSelectionTransition(event.oldSelection, event.newSelection); } } ``` ## 単一選択 デフォルトでは、Combo コントロールは複数選択を提供します。以下のスニペットは、ハンドラーを `selectionChanging` イベントにアタッチすることで、コンポーネントで単一選択を可能にする方法を示します。 ```html ``` ```typescript public singleSelection(event: IComboSelectionChangingEventArgs) { if (event.added.length) { event.newValue = event.added; } } ``` > 注: igxCombo を変更する代わりに、[igxSimpleCombo](simple-combo.md) を使用することをお勧めします (上記を参照)。
## キーボード ナビゲーション コンボボックスを閉じてフォーカスされている場合: - `下矢印`または `Alt` キー + `下矢印`はコンボボックス ドロップダウンを開き、検索入力にフォーカスを移動します。 - `Esc` キーは、コンボボックスにフォーカスを保持したまま、選択された値をクリアします。 - `Tab` キーは、コンボボックスの外部にある次のフォーカス可能な要素へフォーカスを移動します。 コンボボックスが開いている場合: - `Esc` キーは、リストを閉じてコンボボックスにフォーカスを保持します。 - `Tab` キーは、リストを閉じて次のフォーカス可能な要素にフォーカスを移動します。 コンボボックスを開いて検索入力にフォーカスがある場合: - `上矢印`または `Alt` キー + `上矢印`はコンボボックス ドロップダウンを閉じ、フォーカスを閉じたコンボボックスに移動します。 - `下矢印`は、フォーカスを検索入力から最初のリスト項目に移動します。リストが空でカスタム値が有効な場合、新しい項目の追加ボタンに移動します。 その他のキー ストロークは入力によって処理されます。 コンボボックスを開いてリスト項目にフォーカスがある場合: - `下矢印`は次のリスト項目に移動します。アクティブな項目がリストの最後の項目で、カスタム値が有効な場合、フォーカスは [項目の追加] ボタンに移動します。 - `上矢印`は前のリスト項目に移動します。アクティブな項目がリストの最初の項目である場合、フォーカスは検索入力に戻ります。 - `End` キーは最後のリスト項目に移動します。 - `Home` キーは最初のリスト項目に移動します。 - `Space` キーはアクティブなリスト項目を選択/選択解除します。 - `Enter` キーはすでに選択した項目を確定し、リストを閉じます。 コンボボックスを開くと、カスタム値が有効になり、項目の追加ボタンがフォーカスされます。 - `Enter` キーは、検索入力のテキストと等しい `valueKey` と `displayKey` を持つ新しい項目を追加し、その項目を選択します。 - `上矢印` - フォーカスは最後のリスト項目に戻るか、あるいはリストが空の場合、検索入力に移動します。 When combobox is opened, allow custom values are enabled and add item button is focused: - `Enter` will add a new item with `valueKey` and `displayKey` equal to the text in the search input and will select the new item. - `ArrowUp` focus will be moved back to the last list item or if the list is empty, will be moved to the search input. ## スタイル設定 ### Combo テーマのプロパティ マップ プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 | Primary Property | Dependent Property | Description | | --- | --- | --- | | **$empty-list-background** | $empty-list-placeholder-color | The combo placeholder text color. | | **$toggle-button-background** | $toggle-button-foreground | The combo toggle button foreground color. | | | $toggle-button-background-focus | The combo toggle button background color when focused. | | | $toggle-button-background-focus--border | The combo toggle button background color when focused (border variant). | | | $toggle-button-foreground-filled | The combo toggle button foreground color when filled. | | | $toggle-button-background-disabled | The combo toggle button background color when disabled. | | | $toggle-button-foreground-disabled | The combo toggle button foreground color when disabled. | | **$toggle-button-background-focus** | $toggle-button-foreground-focus | The combo toggle button foreground color when focused. | | **$clear-button-background-focus** | $clear-button-foreground-focus | The combo clear button foreground color when focused. | [`Ignite UI for Angular テーマ`](themes/index.md)を使用して、コンボボックスの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。 // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` 最もシンプルな方法として、を拡張する新しいテーマを作成します。`$toggle-button-background` を設定することで、新しいテーマがボタンに対する状態色や前景の色を自動的に決定します。必要に応じて、`$search-separator-border-color` などの追加パラメーターを指定することも可能です。 ```scss $custom-combo-theme: combo-theme( $search-separator-border-color: #1d3743, $toggle-button-background: #57a5cd, ); ``` は、項目コンテナーとして を内部使用します。および コンポーネントも含まれます。これらのコンポーネントのテーマを拡張する新しいテーマを作成し、それぞれのクラスの下にスコープすることで、コンボボックスのスタイル設定を変更できます。 ```scss $custom-drop-down-theme: drop-down-theme( $background-color: #57a5cd, ); $custom-checkbox-theme: checkbox-theme( $border-radius: 10px, $fill-color: #1d3743, $empty-color: #1d3743, ); ``` 最後にコンポーネントのテーマを含めます。 ```scss :host { @include tokens($custom-combo-theme); @include tokens($custom-drop-down-theme); @include tokens($custom-checkbox-theme); } ``` は、[`IgxOverlay`](overlay.md) サービスを使用して、コンボボックス項目のリスト コンテナーを保持および表示します。スタイルを適切にスコープするには、を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。 ### デモ
### Tailwind によるスタイル設定 カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: ```scss @import "tailwindcss"; ... @use 'igniteui-theming/tailwind/utilities/material.css'; ``` ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 - `light-*` クラスはライト テーマ用です。 - `dark-*` クラスはダーク テーマ用です。 - プレフィックスの後にコンポーネント名を追加します (例: `light-combo`、`dark-combo`)。 これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 プロパティの完全なリストは、で確認できます。構文は次のとおりです: ```html ``` ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 最終的に、combo は次のようになります: ## 既知の問題 - 選択した項目を表示するコンボボックス入力は編集できません。ただし、IE および FireFox のブラウザー仕様により、カーソルは表示されます。 - コンボボックスが `undefined` (例: `[ undefined, ...]`) を含むプリミティブ データの配列にバインドされる場合、`undefined` はドロップダウンに表示されません。複合データ (オブジェクトなど) の配列にバインドされ、`valueKey` に使用される値が `undefined` の場合、項目はドロップダウンに表示されますが、選択はできません。 - コンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。 コンボボックスは内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限がコンボボックスで有効です。詳細については、[`igxForOf 既知の制限`](for-of.md#既知の制限)セクションを参照してください。 ## API リファレンス
- - その他の [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)およびディレクティブ (またはそのいずれか) で使用した API: - - - ## テーマの依存関係 - - - - ## その他のリソース
- [コンボボックス機能](combo-features.md) - [コンボボックス リモート バインディング](combo-remote.md) - [コンボボックス テンプレート](combo-templates.md) - [テンプレート駆動フォームの統合](input-group.md) - [リアクティブ フォームの統合](angular-reactive-form-validation.md) - [単一選択コンボボックス](simple-combo.md) コミュニティに参加して新しいアイデアをご提案ください。 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)