クラス IgxComboComponent

編集可能な機能を提供するドロップダウン リストを表します。ユーザーは定義済みのリストからオプションを選択できます。

igxmodule

IgxComboModule

igxtheme

igx-combo-theme

igxkeywords

combobox, combo selection

igxgroup

Grids & Lists

備考:

項目をフィルターする機能、および提供されたデータで単一または複数の選択を実行する機能を提供します。 また、キーボード ナビゲーションおよびカスタム スタイル設定機能を公開します。

例:
<igx-combo [itemsMaxHeight]="250" [data]="locationData"
[displayKey]="'field'" [valueKey]="'field'"
placeholder="Location(s)" searchPlaceholder="Search...">
</igx-combo>

階層

  • IgxComboBaseDirective
    • IgxComboComponent

実装

  • AfterViewInit
  • ControlValueAccessor
  • OnInit
  • OnDestroy
  • EditorProvider

Index

コンストラクタ

プロパティ

addItemTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ ドロップダウンの ADD BUTTON の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.addItemTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboAddItem>
<button class="combo__add-button">
Click to add item
</button>
</ng-template>
</igx-combo>
addition: EventEmitter<IComboItemAdditionEvent> = ...

項目がデータ コレクションに追加されているときに発生します。

<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
allowCustomValues: boolean = false

カスタム値をコレクションに追加できるかどうかを制御します。

// 取得
let comboAllowsCustomValues = this.combo.allowCustomValues;
<!--設定-->
<igx-combo [allowCustomValues]='true'></igx-combo>
ariaLabelledBy: string

aria-labelledby 属性を設定する @Input プロパティ。

<igx-combo [ariaLabelledBy]="'label1'">
autoFocusSearch: boolean = true

opened イベントが呼び出された後にコンボの検索ボックスにフォーカスするかどうかを制御する @Inputプロパティ。 false の場合、代わりにコンボのリスト項目コンテナーがフォーカスされます。

clearIconTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ CLEAR (開く/閉じる) ボタンを描画するために使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboClearIcon>
<igx-icon>clear</igx-icon>
</ng-template>
</igx-combo>
closed: EventEmitter<IBaseEventArgs> = ...

ドロップダウンが閉じられた後に発生します。

<igx-combo (closed)='handleClosed($event)'></igx-combo>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

ドロップダウンが閉じる前に発生します。

<igx-combo (closing)='handleClosing($event)'></igx-combo>
dataPreLoad: EventEmitter<IForOfState> = ...

新しいデータの塊が仮想化から読み込まれたときに発生します。

<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
disabled: boolean = false

コンボを有効/無効にする @Input プロパティ。デフォルトは false です。

<igx-combo [disabled]="'true'">
emptyTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ ドロップダウンの ADD BUTTON の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboEmpty>
<div class="combo--empty">
表示する項目はありません
</div>
</ng-template>
</igx-combo>
filterFunction: ((collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[])

Type declaration

    • コンボのカスタム フィルタリング機能を取得または設定します。

      例:
       <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo>
      

      パラメーター

      返却 any[]

footerTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ項目リストのための FOOTER の描画に使用されます

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboFooter>
<div class="combo__footer">
This is a custom footer
</div>
</ng-template>
</igx-combo>
headerItemTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ リスト内のグループのため HEADER ITEMS の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboHeaderItem let-item let-key="groupKey">
<div class="custom-item--group">Group header for {{ item[key] }}</div>
</ng-template>
</igx-combo>
headerTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ項目リストのための HEADER の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboHeader>
<div class="combo__header">
This is a custom header
</div>
</ng-template>
</igx-combo>
id: string = ...

コンボの id を取得または設定します。

// 取得
let id = this.combo.id;
<!--設定-->
<igx-combo [id]='combo1'></igx-combo>
itemTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ リストの ITEMS の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboItem let-item let-key="valueKey">
<div class="custom-item">
<div class="custom-item__name">{{ item[key] }}</div>
<div class="custom-item__cost">{{ item.cost }}</div>
</div>
</ng-template>
</igx-combo>
itemsWidth: string

ドロップダウン リストの幅を構成します。

// 取得
let myComboItemsWidth = this.combo.itemsWidth;
<!--設定-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
opened: EventEmitter<IBaseEventArgs> = ...

ドロップダウンが開いた後に発生します。

<igx-combo (opened)='handleOpened($event)'></igx-combo>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

ドロップダウンが開く前に発生します。

<igx-combo opening='handleOpening($event)'></igx-combo>
overlaySettings: OverlaySettings = null

コンボの項目リストの表示方法を制御するカスタム オーバーレイ設定を設定します。 Set:

<igx-combo [overlaySettings] = "customOverlaySettings"></igx-combo>
 const customSettings = { positionStrategy: { settings: { target: myTarget } } };
combo.overlaySettings = customSettings;

コンボで使用されるカスタム オーバーレイ設定を取得します。

 const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
placeholder: string

コンボの値フィールドのプレースホルダー値を定義します。

// 取得
let myComboPlaceholder = this.combo.placeholder;
<!--設定-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>
searchInputUpdate: EventEmitter<IComboSearchInputEventArgs> = ...

検索入力の値が変更 (入力、貼り付け、クリアなど) するときに発生します。

<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
searchPlaceholder: string = 'Enter a Search Term'

コンボ ドロップダウンの検索フィールドのプレースホルダー値を定義します。

// 取得
let myComboSearchPlaceholder = this.combo.searchPlaceholder;
<!--設定-->
<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
selectionChanging: EventEmitter<IComboSelectionChangingEventArgs> = ...

選択を完了する前にアイテム選択が変更されるときに発生します。

<igx-combo (selectionChanging)='handleSelection()'></igx-combo>
showSearchCaseIcon: boolean = false

caseSensitive アイコンを検索入力に表示するかどうかを定義します。

// 取得
let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
<!--設定-->
<igx-combo [showSearchCaseIcon]='true'></igx-combo>
toggleIconTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ TOGGLE (開く/閉じる) ボタンを描画するために使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
</ng-template>
</igx-combo>
valueKey: string = null

値を決定するためにデータ ソースのどの列を使用するかを決定します。

// 取得
let myComboValueKey = this.combo.valueKey;
<!--設定-->
<igx-combo [valueKey]='myKey'></igx-combo>
width: string

要素のスタイルの幅を設定します。

// 取得
let myComboWidth = this.combo.width;
<!--設定-->
<igx-combo [width]='250px'></igx-combo>

アクセサー

  • get collapsed(): boolean
  • get data(): any[]
  • set data(val: any[]): void
  • get displayKey(): string
  • set displayKey(val: string): void
  • get filterable(): boolean
  • set filterable(value: boolean): void
  • 非推奨

    バージョン 14.0.0。IComboFilteringOptions.filterable を使用してください。 リストでフィルタリングを有効/無効にする @Input プロパティ。デフォルトは true です。

    <igx-combo [filterable]="false">
    

    返却 boolean

  • 非推奨

    バージョン 14.0.0。IComboFilteringOptions.filterable を使用してください。 リストでフィルタリングを有効/無効にする @Input プロパティ。デフォルトは true です。

    <igx-combo [filterable]="false">
    

    パラメーター

    • value: boolean

    返却 void

  • get groupKey(): string
  • set groupKey(val: string): void
  • 項目リストで項目をグループ化する項目プロパティ。データが Object[] 型ではない場合に利用できません。

    // 取得
    let currentGroupKey = this.combo.groupKey;

    返却 string

  • 項目リストで項目をグループ化する項目プロパティ。データが Object[] 型ではない場合に利用できません。

    <!--設定-->
    <igx-combo [groupKey]='newGroupKey'></igx-combo>

    パラメーター

    • val: string

    返却 void

  • get itemHeight(): number
  • set itemHeight(val: number): void
  • ドロップダウン リスト項目の高さを構成します。

    // 取得
    let myComboItemHeight = this.combo.itemHeight;
    <!--設定-->
    <igx-combo [itemHeight]='32'></igx-combo>

    返却 number

  • ドロップダウン リスト項目の高さを構成します。

    // 取得
    let myComboItemHeight = this.combo.itemHeight;
    <!--設定-->
    <igx-combo [itemHeight]='32'></igx-combo>

    パラメーター

    • val: number

    返却 void

  • get itemsMaxHeight(): number
  • set itemsMaxHeight(val: number): void
  • ドロップダウン リストの高さを構成します。

    // 取得
    let myComboItemsMaxHeight = this.combo.itemsMaxHeight;
    <!--設定-->
    <igx-combo [itemsMaxHeight]='320'></igx-combo>

    返却 number

  • ドロップダウン リストの高さを構成します。

    // 取得
    let myComboItemsMaxHeight = this.combo.itemsMaxHeight;
    <!--設定-->
    <igx-combo [itemsMaxHeight]='320'></igx-combo>

    パラメーター

    • val: number

    返却 void

  • get selection(): any[]
  • get totalItemCount(): number
  • set totalItemCount(count: number): void
  • リモート サービスを使用する場合、仮想データ項目の合計数を取得します。

    // 取得
    let count = this.combo.totalItemCount;

    返却 number

  • リモート サービスを使用する場合、仮想データ項目の合計数を設定します。

    // 設定
    this.combo.totalItemCount(remoteService.count);

    パラメーター

    • count: number

    返却 void

  • get valid(): IgxComboState
  • set valid(valid: IgxComboState): void
  • get value(): string

メソッド

  • close(): void
  • deselect(items: any[], event?: Event): void
  • 定義済みの項目の選択を解除します。

    パラメーター

    • items: any[]

      items to deselected

      this.combo.deselect(["New York", "New Jersey"]);
      
    • オプション event: Event

    返却 void

  • deselectAllItems(ignoreFilter?: boolean, event?: Event): void
  • フィルター済みのすべての項目の選択を解除します。

    パラメーター

    • オプション ignoreFilter: boolean

      if set to true, deselects all items, otherwise deselects only the filtered ones.

      this.combo.deselectAllItems();
      
    • オプション event: Event

    返却 void

  • open(): void
  • select(newItems: any[], clearCurrentSelection?: boolean, event?: Event): void
  • 定義済みの項目を選択します。

    パラメーター

    • newItems: any[]

      new items to be selected

    • オプション clearCurrentSelection: boolean

      if true clear previous selected items

      this.combo.select(["New York", "New Jersey"]);
      
    • オプション event: Event

    返却 void

  • selectAllItems(ignoreFilter?: boolean, event?: Event): void
  • すべての項目 (フィルター済み) を選択します。

    パラメーター

    • オプション ignoreFilter: boolean

      if set to true, selects all items, otherwise selects only the filtered ones.

      this.combo.selectAllItems();
      
    • オプション event: Event

    返却 void

  • setSelectedItem(itemID: any, select?: boolean, event?: Event): void
  • 1 つの項目を選択/選択解除します。

    パラメーター

    • itemID: any

      the itemID of the specific item

    • select: boolean = true

      If the item should be selected (true) or deselected (false)

      Without specified valueKey;

      this.combo.valueKey = null;
      const items: { field: string, region: string}[] = data;
      this.combo.setSelectedItem(items[0], true);

      With specified valueKey;

      this.combo.valueKey = 'field';
      const items: { field: string, region: string}[] = data;
      this.combo.setSelectedItem('Connecticut', true);
    • オプション event: Event

    返却 void

  • toggle(): void
  • triggerCheck(): void