クラス 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>

階層

実装

  • IgxSelectBase
  • ControlValueAccessor
  • AfterContentInit
  • OnInit
  • AfterViewInit
  • OnDestroy
  • EditorProvider

Index

コンストラクタ

プロパティ

closed: EventEmitter<IBaseEventArgs> = ...

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

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

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

<igx-select (closing)='handleClosing($event)'></igx-select>
disabled: boolean = false

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

<igx-select [disabled]="'true'"></igx-select>
footerTemplate: TemplateRef<any> = null

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

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

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.headerTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-select #select>
...
<ng-template igxSelectHeader>
<div class="select__header">
This is a custom header
</div>
</ng-template>
</igx-select>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
opened: EventEmitter<IBaseEventArgs> = ...

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

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

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

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

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

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

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

selectionChanging: EventEmitter<ISelectionEventArgs> = ...

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

<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
toggleIconTemplate: TemplateRef<any> = null

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

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

アクセサー

  • get collapsed(): boolean
  • get element(): any
  • get id(): string
  • set id(value: string): void
  • get listId(): string
  • get value(): any
  • set value(v: any): void

メソッド

  • clearSelection(): void
  • close(event?: Event): void
  • inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings): void
  • navigateItem(index: number): void
  • ngDoCheck(): void
  • onItemActionKey(key: DropDownActionKey, event?: Event): void
  • setSelectedItem(index: number): void