Ignite UI for Angular Select - Documentation

The igxSelect provides an input with dropdown list allowing selection of a single item.

Example:

<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>

Constructors

Section titled "Constructors"

IgxSelectComponent

new IgxSelectComponent(): IgxSelectComponent

Returns IgxSelectComponent

Properties

Section titled "Properties"

closed

Section titled "closed"

Emitted after the dropdown is closed

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

Defined in projects/igniteui-angular/select/src/select/select.component.ts:173

closing

Section titled "closing"

Emitted before the dropdown is closed

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

Defined in projects/igniteui-angular/select/src/select/select.component.ts:163

disabled

Section titled "disabled"

Disables the component.

<igx-select [disabled]="'true'"></igx-select>
disabled: boolean = false

Defined in projects/igniteui-angular/select/src/select/select.component.ts:120

document

Section titled "document"

Inherited from: IgxDropDownComponent 

document: Document

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:26

footerTemplate

Section titled "footerTemplate"

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>
footerTemplate: TemplateRef<any> = null

Defined in projects/igniteui-angular/select/src/select/select.component.ts:240

headerTemplate

Section titled "headerTemplate"

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>
headerTemplate: TemplateRef<any> = null

Defined in projects/igniteui-angular/select/src/select/select.component.ts:217

labelledBy

Section titled "labelledBy"

Inherited from: IgxDropDownComponent

Sets aria-labelledby attribute value.

<igx-drop-down [labelledby]="labelId"></igx-drop-down>
labelledBy: string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:134

opened

Section titled "opened"

Emitted after the dropdown is opened

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

Defined in projects/igniteui-angular/select/src/select/select.component.ts:153

opening

Section titled "opening"

Emitted before the dropdown is opened

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

Defined in projects/igniteui-angular/select/src/select/select.component.ts:143

overlaySettings

Section titled "overlaySettings"

Sets custom OverlaySettings IgxSelectComponent.

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

Defined in projects/igniteui-angular/select/src/select/select.component.ts:129

placeholder

Section titled "placeholder"

Sets input placeholder.

 
placeholder: any

Defined in projects/igniteui-angular/select/src/select/select.component.ts:111

role

Section titled "role"

Inherited from: IgxDropDownComponent

Gets/sets the role attribute of the drop down. Default is 'listbox'.

<igx-drop-down [role]="customRole"></igx-drop-down-item>
role: string = 'listbox'

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:144

selectionChanging

Section titled "selectionChanging"

Inherited from: IgxDropDownComponent

Emitted when item selection is changing, before the selection completes

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:36

toggleIconTemplate

Section titled "toggleIconTemplate"

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>
toggleIconTemplate: TemplateRef<any> = null

Defined in projects/igniteui-angular/select/src/select/select.component.ts:194

id

Section titled "id"

Inherited from: IgxDropDownComponent 

id: string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:183, projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:186

type

Section titled "type" 
type: IgxInputGroupType

Defined in projects/igniteui-angular/select/src/select/select.component.ts:297, projects/igniteui-angular/select/src/select/select.component.ts:301

value

Section titled "value" 
value: any

Defined in projects/igniteui-angular/select/src/select/select.component.ts:278, projects/igniteui-angular/select/src/select/select.component.ts:281

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Inherited from: IgxDropDownComponent

Gets if the dropdown is collapsed

let isCollapsed = this.dropdown.collapsed;
get collapsed(): boolean

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:221

Returns boolean

element

Section titled "element"

Inherited from: IgxDropDownComponent

Get dropdown html element

let myDropDownElement = this.dropdown.element;
get element(): any

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:158

Returns any

headers

Section titled "headers"

Inherited from: IgxDropDownComponent

Get all header items

let myDropDownHeaderItems = this.dropdown.headers;
get headers(): IgxDropDownItemBaseDirective[]

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:138

Returns IgxDropDownItemBaseDirective[]

items

Section titled "items"

Inherited from: IgxDropDownComponent

Get all non-header items

let myDropDownItems = this.dropdown.items;
get items(): IgxDropDownItemBaseDirective[]

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.base.ts:118

Returns IgxDropDownItemBaseDirective[]

listId

Section titled "listId"

Inherited from: IgxDropDownComponent

Id of the internal listbox of the drop down

get listId(): string

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:195

Returns string

Methods

Section titled "Methods"

clearSelection

Section titled "clearSelection"

Inherited from: IgxDropDownComponent

Clears the selection of the dropdown

this.dropdown.clearSelection();
clearSelection(): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:574

Returns void

close

Section titled "close"

Inherited from: IgxDropDownComponent

Closes the dropdown

this.dropdown.close();
close(event: Event): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:270

Parameters

  • event: Event

Returns void

inputGroupClick

Section titled "inputGroupClick" 
inputGroupClick(event: MouseEvent, overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/select/src/select/select.component.ts:401

Parameters

Returns void

Section titled "navigateItem"

Inherited from: IgxDropDownComponent

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.

navigateItem(index: number): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:316

Parameters

  • index: number

Returns void

onItemActionKey

Section titled "onItemActionKey"

Inherited from: IgxDropDownComponent

Keydown Handler

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

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:465

Parameters

Returns void

open

Section titled "open"

Opens the select

this.select.open();
open(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/select/src/select/select.component.ts:390

Parameters

Returns void

setSelectedItem

Section titled "setSelectedItem"

Inherited from: IgxDropDownComponent

Select an item by index

setSelectedItem(index: number): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:294

Parameters

  • index: number

    of the item to select; If the drop down uses *igxFor, pass the index in data

Returns void

toggle

Section titled "toggle"

Inherited from: IgxDropDownComponent

Toggles the dropdown

this.dropdown.toggle();
toggle(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.ts:281

Parameters

Returns void