クラス IgxSelectComponent

Ignite UI for Angular Select - ヘルプ

igxSelect は、単一項目の選択ができるドロップダウン リストの入力を提供します。 例:

<igx-select #select1 [placeholder]="'Pick One'">
  <label igxLabel>Select Label</label>
  <igx-select-item *ngFor="let item of items" [value]="item.field">
    {{ item.field }}
  </igx-select-item>
</igx-select>

階層

実装

  • DoCheck
  • OnInit
  • IDropDownList
  • IDropDownBase
  • OnChanges
  • AfterViewInit
  • OnDestroy
  • IgxSelectBase
  • ControlValueAccessor
  • AfterContentInit
  • OnInit
  • AfterViewInit
  • OnDestroy
  • EditorProvider

コンストラクタ

constructor

プロパティ

disabled

disabled: boolean = false

IgxSelectComponent を無効にする @Input プロパティ。

<igx-select [disabled]="'true'"></igx-select>

footerTemplate

footerTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.footerTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-select #select>
     ...
     <ng-template igxSelectFooter>
         <div class="select__footer">
             This is a custom footer
         </div>
     </ng-template>
 </igx-select>

headerTemplate

headerTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.headerTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-select #select>
     ...
     <ng-template igxSelectHeader>
         <div class="select__header">
             This is a custom header
         </div>
     </ng-template>
 </igx-select>

onClosed

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

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

<igx-drop-down (onClosed)='handleClosed()'></igx-drop-down>

onClosing

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

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

<igx-drop-down (onClosing)='handleClosing()'></igx-drop-down>

onDensityChanged

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

onOpened

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

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

<igx-drop-down (onOpened)='handleOpened()'></igx-drop-down>

onOpening

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

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

<igx-drop-down (onOpening)='handleOpening()'></igx-drop-down>

onSelection

onSelection: EventEmitter<ISelectionEventArgs> = new EventEmitter<ISelectionEventArgs>()

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

<igx-drop-down (onSelection)='handleSelection()'></igx-drop-down>

overlaySettings

overlaySettings: OverlaySettings

カスタム OverlaySettings IgxSelectComponent を設定する @Input プロパティ。

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

placeholder

placeholder: any

入力 プレースホルダーを設定する @Input プロパティ。

toggleIconTemplate

toggleIconTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.toggleIconTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-select #select>
     ...
     <ng-template igxSelectToggleIcon let-collapsed>
         <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
     </ng-template>
 </igx-select>

type

type: string = "line"

選択のスタイル設定するを設定する @Input プロパティ。 有効な値は linebox および border。デフォルトは line です。

<igx-select [type]="'box'"></igx-select>

アクセサー

collapsed

  • get collapsed(): boolean

displayDensity

element

  • get element(): any

headers

id

  • get id(): string
  • set id(value: string): void

items

listId

  • get listId(): string

value

  • get value(): any
  • set value(v: any): void

メソッド

clearSelection

  • clearSelection(): void

close

  • close(): void

inputGroupClick

  • inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings): void

navigateItem

  • navigateItem(index: number): void

ngDoCheck

  • ngDoCheck(): void

onItemActionKey

open

setSelectedItem

  • setSelectedItem(index: number): void

toggle