// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.addItemTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboAddItem>
         <button class="combo__add-button">
             Click to add item
         </button>
     </ng-template>
 </igx-combo>

// 取得
let comboAllowsCustomValues = this.combo.allowCustomValues;

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboClearIcon>
         <igx-icon>clear</igx-icon>
     </ng-template>
 </igx-combo>

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboEmpty>
         <div class="combo--empty">
             There are no items to display
         </div>
     </ng-template>
 </igx-combo>

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboFooter>
         <div class="combo__footer">
             This is a custom footer
         </div>
     </ng-template>
 </igx-combo>

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <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>

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboHeader>
         <div class="combo__header">
             This is a custom header
         </div>
     </ng-template>
 </igx-combo>

// 取得
let id = this.combo.id;

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboItem>
         <div class="custom-item" let-item let-key="valueKey">
             <div class="custom-item__name">{{ item[key] }}</div>
             <div class="custom-item__cost">{{ item.cost }}</div>
         </div>
     </ng-template>
 </igx-combo>

// 取得
let myComboItemsWidth = this.combo.itemsWidth;

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

<igx-combo (onAddition)='handleAdditionEvent()'></igx-combo>

<igx-combo (onClosed)='handleClosed()'></igx-combo>

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

<igx-combo (onDataPreLoad)='handleDataPreloadEvent()'></igx-combo>

<igx-combo (onOpened)='handleOpened()'></igx-combo>

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

<igx-combo (onSearchInput)='handleSearchInputEvent()'></igx-combo>

<igx-combo (onSelectionChange)='handleSelection()'></igx-combo>

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

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

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

 const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;

// 取得
let myComboPlaceholder = this.combo.placeholder;

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

// 取得
let myComboSearchPlaceholder = this.combo.searchPlaceholder;

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

// 取得
let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;

<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboToggleIcon let-collapsed>
         <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
     </ng-template>
 </igx-combo>

// 取得
let myComboValueKey = this.combo.valueKey;

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

// 取得
let myComboWidth = this.combo.width;

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