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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.addItemTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboAddItem>
         <button type="button" igxButton="raised" class="combo__add-button">
             Click to add item
         </button>
     </ng-template>
 </igx-combo>
Copy

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

<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
Copy

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

// get
let comboAllowsCustomValues = this.combo.allowCustomValues;
Copy

<!--set-->
<igx-combo [allowCustomValues]='true'></igx-combo>
Copy

aria-labelledby 属性値を設定します。

<igx-combo [ariaLabelledBy]="'label1'">
Copy

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboClearIcon>
         <igx-icon>clear</igx-icon>
     </ng-template>
 </igx-combo>
Copy

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

<igx-combo (closed)='handleClosed($event)'></igx-combo>
Copy

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

<igx-combo (closing)='handleClosing($event)'></igx-combo>
Copy

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

<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
Copy

コンボを無効にします。デフォルトは false です。

<igx-combo [disabled]="'true'">
Copy

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboEmpty>
         <div class="combo--empty">
             There are no items to display
         </div>
     </ng-template>
 </igx-combo>
Copy

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

例

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

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboFooter>
         <div class="combo__footer">
             This is a custom footer
         </div>
     </ng-template>
 </igx-combo>
Copy

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;
Copy

<!-- Set in 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>
Copy

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboHeader>
         <div class="combo__header">
             This is a custom header
         </div>
     </ng-template>
 </igx-combo>
Copy

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

// get
let id = this.combo.id;
Copy

<!--set-->
<igx-combo [id]='combo1'></igx-combo>
Copy

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;
Copy

<!-- Set in 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>
Copy

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

// get
let myComboItemsWidth = this.combo.itemsWidth;
Copy

<!--set-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>
Copy

ドロップダウンが開かれた後に発生されます。

<igx-combo (opened)='handleOpened($event)'></igx-combo>
Copy

ドロップダウンが開かれる前に発生されます。

<igx-combo opening='handleOpening($event)'></igx-combo>
Copy

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

<igx-combo [overlaySettings]="customOverlaySettings"></igx-combo>
Copy

 const customSettings = { positionStrategy: { settings: { target: myTarget } } };
 combo.overlaySettings = customSettings;
Copy

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

 const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
Copy

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

// get
let myComboPlaceholder = this.combo.placeholder;
Copy

<!--set-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>
Copy

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

<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
Copy

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

// get
let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
Copy

<!--set-->
<igx-combo [showSearchCaseIcon]='true'></igx-combo>
Copy

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

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-combo #combo>
     ...
     <ng-template igxComboToggleIcon let-collapsed>
         <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
     </ng-template>
 </igx-combo>
Copy

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

// get
let myComboValueKey = this.combo.valueKey;
Copy

<!--set-->
<igx-combo [valueKey]='myKey'></igx-combo>
Copy

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

// get
let myComboWidth = this.combo.width;
Copy

<!--set-->
<igx-combo [width]='250px'></igx-combo>
Copy