クラス IgxComboComponent

階層

実装

  • DoCheck
  • OnInit
  • IgxComboBase
  • AfterViewInit
  • ControlValueAccessor
  • OnInit
  • OnDestroy
  • EditorProvider

コンストラクタ

constructor

  • new IgxComboComponent(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, comboAPI: IgxComboAPIService, _displayDensityOptions: IDisplayDensityOptions, _injector: Injector): IgxComboComponent

プロパティ

addItemTemplate

addItemTemplate: TemplateRef<any> = null

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

// 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>

allowCustomValues

allowCustomValues: boolean = false

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

// 取得
let comboAllowsCustomValues = this.combo.allowCustomValues;
<!--set-->
<igx-combo [allowCustomValues]='true'></igx-combo>

ariaLabelledBy

ariaLabelledBy: string

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

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

autoFocusSearch

autoFocusSearch: boolean = true

onOpened イベントが呼び出された後に コンボの検索ボックスにフォーカスするかどうかを制御する @Inputプロパティ。

clearIconTemplate

clearIconTemplate: TemplateRef<any> = null

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

// 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>

disabled

disabled: boolean = false

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

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

emptyTemplate

emptyTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;
<!-- マークアップに設定 -->
 <igx-combo #combo>
     ...
     <ng-template igxComboEmpty>
         <div class="combo--emtpy">
             There are no items to display
         </div>
     </ng-template>
 </igx-combo>

filterable

filterable: boolean = true

リストでフィルタリングを有効/無効にする @Input プロパティ。デフォルトは true です。

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

footerTemplate

footerTemplate: TemplateRef<any> = null

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

// 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>

headerItemTemplate

headerItemTemplate: TemplateRef<any> = null

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

// 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>

headerTemplate

headerTemplate: TemplateRef<any> = null

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

// 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>

id

id: string = `igx-combo-${NEXT_ID++}`

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

// 取得
let id = this.combo.id;
<!--set-->
<igx-combo [id]='combo1'></igx-combo>

itemTemplate

itemTemplate: TemplateRef<any> = null

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

// 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>

itemsWidth

itemsWidth: string

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

// 取得
let myComboItemsWidth = this.combo.itemsWidth;
<!--set-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>

onAddition

onAddition: EventEmitter<IComboItemAdditionEvent> = new EventEmitter<IComboItemAdditionEvent>()

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

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

onClosed

onClosed: EventEmitter<void> = new EventEmitter<void>()

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

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

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

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

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

onDataPreLoad

onDataPreLoad: EventEmitter<any> = new EventEmitter<any>()

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

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

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onOpened

onOpened: EventEmitter<void> = new EventEmitter<void>()

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

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

onOpening

onOpening: EventEmitter<CancelableEventArgs & IBaseEventArgs> = new EventEmitter<CancelableEventArgs & IBaseEventArgs>()

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

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

onSearchInput

onSearchInput: EventEmitter<any> = new EventEmitter()

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

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

onSelectionChange

onSelectionChange: EventEmitter<IComboSelectionChangeEventArgs> = new EventEmitter<IComboSelectionChangeEventArgs>()

選択が完了する前に項目の選択が変更されたときに発生されます。

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

overlaySettings

overlaySettings: OverlaySettings = null

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

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

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

 const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;

placeholder

placeholder: any

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

// 取得
let myComboPlaceholder = this.combo.placeholder;
<!--set-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>

searchPlaceholder

searchPlaceholder: string = "Enter a Search Term"

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

// 取得
let myComboSearchPlaceholder = this.combo.searchPlaceholder;
<!--set-->
<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>

toggleIconTemplate

toggleIconTemplate: TemplateRef<any> = null

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

// 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>

type

type: string = "box"

コンボのスタイルを設定する @Input プロパティ。 有効な値は lineboxborder、および search です。デフォルトは box です。

<igx-combo [type]="'line'">

valueKey

valueKey: string = null

コンボ値データソース プロパティ。

// 取得
let myComboValueKey = this.combo.valueKey;
<!--set-->
<igx-combo [valueKey]='myKey'></igx-combo>

width

width: string

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

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

アクセサー

collapsed

  • get collapsed(): boolean

data

  • get data(): any[]
  • set data(val: any[]): void

displayDensity

displayKey

  • get displayKey(): string
  • set displayKey(val: string): void
  • コンボ テキスト データソース プロパティ。

    // 取得
    let myComboDisplayKey = this.combo.displayKey;
    // 設定
    this.combo.displayKey = 'val';
    <!--set-->
    <igx-combo [displayKey]='myDisplayKey'></igx-combo>

    返却 string

  • コンボ テキスト データソース プロパティ。

    // 取得
    let myComboDisplayKey = this.combo.displayKey;
    // 設定
    this.combo.displayKey = 'val';
    <!--set-->
    <igx-combo [displayKey]='mydisplayKey'></igx-combo>

    パラメーター

    • val: string

    返却 void

groupKey

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

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

    返却 string

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

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

    パラメーター

    • val: string

    返却 void

itemHeight

  • get itemHeight(): number
  • set itemHeight(val: number): void

itemsMaxHeight

  • get itemsMaxHeight(): number
  • set itemsMaxHeight(val: number): void

totalItemCount

  • get totalItemCount(): number
  • set totalItemCount(count: number): void

valid

value

  • get value(): string

virtualizationState

メソッド

close

  • close(): void

deselectAllItems

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

    パラメーター

    • オプション ignoreFilter: boolean

      True に設定されている場合、すべての項目の選択を解除します。そうでない場合、フィルターのみの項目を選択解除します。

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

    返却 void

deselectItems

  • deselectItems(items: Array<any>, event?: Event): void

ngDoCheck

  • ngDoCheck(): void

open

  • open(): void

selectAllItems

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

    パラメーター

    • オプション ignoreFilter: boolean

      True に設定されている場合、すべての項目を設定します。そうでない場合、フィルターのみの項目を選択します。

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

    返却 void

selectItems

  • selectItems(newItems: Array<any>, clearCurrentSelection?: boolean, event?: Event): void
  • 定義済みの項目を選択します。

    パラメーター

    • newItems: Array<any>

      選択される新しい項目。

    • オプション clearCurrentSelection: boolean

      True の場合、前回選択した項目がクリアされます。

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

    返却 void

selectedItems

  • selectedItems(): any[]

setSelectedItem

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

    パラメーター

    • itemID: any

      指定される項目の itemID。

    • デフォルト値 select: boolean = true

      項目が選択されるか (true) または選択解除されるか (false)。 指定された valueKey なし;

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

      指定された valueKey を使用;

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

    返却 void

toggle

  • toggle(): void

triggerCheck

  • triggerCheck(): void