ドロップダウンが閉じた後に発生されます。
<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 の描画に使用されます。
// Set in 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>
カスタム テンプレートがある場合は、select items リストのための HEADER の描画に使用されます。
// Set in 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>
aria-labelledby 属性を設定する
プロパティです。
<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 (開く/閉じる) ボタンを描画するために使用されるカスタム テンプレートです。
// Set in 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>
ドロップダウンが閉じたかどうかを取得します。
let isCollapsed = this.dropdown.collapsed;
バージョン 16.1.x 以降。
--ig-size CSS カスタム プロパティを使用してください。
コンポーネントのテーマを返します。
デフォルトのテーマは 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 プロパティです。
// get
let selectValue = this.select.value;
// set
this.select.value = 'London';
<igx-select [value]="value"></igx-select>
表示密度の値に基づいて --component-size CSS 変数を設定します。
指定されたインデックスにある項目へ移動します。 ドロップダウンのデータが仮想化されている場合は、仮想化されたデータ内のアイテムのインデックスを渡します。
選択されたのを開きます。
this.select.open();
ドロップダウンを切り替えます。
this.dropdown.toggle();
Ignite UI for Angular Select - ヘルプ
igxSelectは、単一項目の選択ができるドロップダウン リストの入力を提供します。例: