Emitted after the dropdown is closed
<igx-select (closed)='handleClosed($event)'></igx-select>
Emitted before the dropdown is closed
<igx-select (closing)='handleClosing($event)'></igx-select>
An
property that disables the IgxSelectComponent.
<igx-select [disabled]="'true'"></igx-select>
The custom template, if any, that should be used when rendering the FOOTER for the select items list
// 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>
The custom template, if any, that should be used when rendering the HEADER for the select items list
// 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>
An
property that set aria-labelledby attribute
<igx-drop-down [labelledby]="labelId"></igx-drop-down>
Emitted after the dropdown is opened
<igx-select (opened)='handleOpened($event)'></igx-select>
Emitted before the dropdown is opened
<igx-select opening='handleOpening($event)'></igx-select>
An
property that sets custom OverlaySettings IgxSelectComponent.
<igx-select [overlaySettings] = "customOverlaySettings"></igx-select>
An
property that sets input placeholder.
Emitted when item selection is changing, before the selection completes
<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button
// 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>
Gets if the dropdown is collapsed
let isCollapsed = this.dropdown.collapsed;
since version 16.1.x.
Please use the --ig-size CSS custom property.
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Get dropdown html element
let myDropDownElement = this.dropdown.element;
Get all header items
let myDropDownHeaderItems = this.dropdown.headers;
Get all non-header items
let myDropDownItems = this.dropdown.items;
Id of the internal listbox of the drop down
An
property that sets how the select will be styled.
The allowed values are line, box and border. The input-group default is line.
<igx-select [type]="'box'"></igx-select>
An
property that gets/sets the component value.
// get
let selectValue = this.select.value;
// set
this.select.value = 'London';
<igx-select [value]="value"></igx-select>
Sets the --component-size CSS variable based on the value of Display Density
Navigates to the item on the specified index If the data in the drop-down is virtualized, pass the index of the item in the virtualized data.
Opens the select
this.select.open();
Toggles the dropdown
this.dropdown.toggle();
Ignite UI for Angular Select - Documentation
The
igxSelectprovides an input with dropdown list allowing selection of a single item.Example: