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

コンストラクタ

constructor

プロパティ

closed

closed: EventEmitter<IBaseEventArgs> = ...

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

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

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

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

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;
<!-- 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;
<!-- Markup に設定 -->
 <igx-select #select>
     ...
     <ng-template igxSelectHeader>
         <div class="select__header">
             This is a custom header
         </div>
     </ng-template>
 </igx-select>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

opened

opened: EventEmitter<IBaseEventArgs> = ...

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

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

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

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

overlaySettings

overlaySettings: OverlaySettings

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

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

placeholder

placeholder: any

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

selectionChanging

selectionChanging: EventEmitter<ISelectionEventArgs> = ...

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

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

toggleIconTemplate

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>

アクセサー

collapsed

  • get collapsed(): boolean

displayDensity

element

  • get element(): any

headers

id

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

items

listId

  • get listId(): string

type

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

  • onItemActionKey(key: DropDownActionKey, event?: Event): void

open

setSelectedItem

  • setSelectedItem(index: number): void

toggle