ドロップダウンが閉じられた後に発生します。
<igx-select (closed)='handleClosed($event)'></igx-select>
ドロップダウンが閉じる前に発生します。
<igx-select (closing)='handleClosing($event)'></igx-select>
IgxSelectComponent
を無効にする @Input プロパティ。
<igx-select [disabled]="'true'"></igx-select>
カスタム テンプレートがある場合は、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>
カスタム テンプレートがある場合は、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>
aria-labelledby 属性を設定する @Input プロパティ。
<igx-drop-down [labelledby]="labelId"></igx-drop-down>
ドロップダウンが開いた後に発生します。
<igx-select (opened)='handleOpened($event)'></igx-select>
ドロップダウンが開く前に発生します。
<igx-select opening='handleOpening($event)'></igx-select>
カスタム OverlaySettings IgxSelectComponent
を設定する @Input プロパティ。
<igx-select [overlaySettings] = "customOverlaySettings"></igx-select>
入力 プレースホルダーを設定する @Input プロパティ。
選択を完了する前に項目選択が変更されるときに発生されます。
<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
カスタム テンプレートがある場合、選択 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>
ドロップダウンが閉じたかどうかを取得します。
let isCollapsed = this.dropdown.collapsed;
コンポーネントのテーマを返します。
デフォルトのテーマは comfortable
です。
利用可能なオプションは comfortable
、cosy
、または compact
です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
ドロップダウンの HTML 要素を取得します。
let myDropDownElement = this.dropdown.element;
すべてのヘッダー項目を取得します。
let myDropDownHeaderItems = this.dropdown.headers;
すべてのヘッダー以外の項目を取得します。
let myDropDownItems = this.dropdown.items;
ドロップダウンの内部リスト ボックスの Id。
選択のスタイル設定するを設定する @Input プロパティ。
有効な値は line
、box
および border
です。入力グループのデフォルト設定line
です。
<igx-select [type]="'box'"></igx-select>
コンポーネントの値を取得または設定する @Input プロパティ。
// 取得
let selectValue = this.select.value;
// 設定
this.select.value = 'London';
<igx-select [value]="value"></igx-select>
指定されたインデックスにある項目へ移動。 ドロップダウンのデータが仮想化されている場合は、仮想化されたデータ内の項目のインデックスを渡します。
Select を開きます。
this.select.open();
ドロップダウンを切り替えます。
this.dropdown.toggle();
Ignite UI for Angular Select - ヘルプ
The
igxSelect
は、単一項目の選択ができるドロップダウン リストの入力を提供します。例: