The <igx-drop-down-item> is a container intended for row items in a <igx-drop-down> container.

Constructors

Section titled "Constructors"

IgxSelectItemComponent 

new IgxSelectItemComponent(): IgxSelectItemComponent

Returns IgxSelectItemComponent

Properties

Section titled "Properties"

id

Section titled "id"

Inherited from: IgxDropDownItemComponent

Sets/gets the id of the item.

<igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item>
let itemId =  this.item.id;
id: string

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

role

Section titled "role"

Inherited from: IgxDropDownItemComponent

Gets/sets the role attribute of the item. Default is 'option'.

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

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

value

Section titled "value"

Inherited from: IgxDropDownItemComponent

Gets/sets the value of the item if the item is databound

// usage in IgxDropDownItemComponent
// get
let mySelectedItemValue = this.dropdown.selectedItem.value;

// set
let mySelectedItem = this.dropdown.selectedItem;
mySelectedItem.value = { id: 123, name: 'Example Name' }

// usage in IgxComboItemComponent
// get
let myComboItemValue = this.combo.items[0].value;
value: any

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

Accessors

Section titled "Accessors"

ariaLabel

Section titled "ariaLabel"

Inherited from: IgxDropDownItemComponent 

get ariaLabel(): string

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

Returns string 

set ariaLabel(value: string): void

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

Parameters

  • value: string

Returns void

disabled

Section titled "disabled"

Inherited from: IgxDropDownItemComponent

Sets/gets if the given item is disabled

// get
 let mySelectedItem = this.dropdown.selectedItem;
 let myItemIsDisabled = mySelectedItem.disabled;
<igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}>
     <div>
         {{item.field}}
     </div>
 </igx-drop-down-item>

NOTE: Drop-down items inside of a disabled drop down group will always count as disabled

 
get disabled(): boolean

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

Returns boolean 

set disabled(value: boolean): void

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

Parameters

  • value: boolean

Returns void

focused

Section titled "focused"

Inherited from: IgxDropDownItemComponent

Sets/gets if the given item is focused

let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemFocused = mySelectedItem.focused;
get focused(): boolean

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

Returns boolean

Sets/gets if the given item is focused

let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemFocused = mySelectedItem.focused;
set focused(value: boolean): void

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

Parameters

  • value: boolean

Returns void

index

Section titled "index"

Inherited from: IgxDropDownItemComponent

The data index of the dropdown item.

// get the data index of the selected dropdown item
let selectedItemIndex = this.dropdown.selectedItem.index
get index(): number

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

Returns number 

set index(value: number): void

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

Parameters

  • value: number

Returns void

selected

Section titled "selected"

Sets/Gets if the item is the currently selected one in the select

let mySelectedItem = this.select.selectedItem;
 let isMyItemSelected = mySelectedItem.selected; // true
get selected(): any

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

Returns any

Sets/Gets if the item is the currently selected one in the dropdown

let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemSelected = mySelectedItem.selected; // true

Two-way data binding

<igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>
set selected(value: any): void

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

Parameters

  • value: any

Returns void

text

Section titled "text"

Gets/Sets the item's text to be displayed in the select component's input when the item is selected.

//get
 let mySelectedItem = this.dropDown.selectedItem;
 let selectedItemText = mySelectedItem.text;
// set
<igx-select-item [text]="'London'"></igx-select-item>
get text(): string

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

Returns string 

set text(text: string): void

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

Parameters

  • text: string

Returns void

Methods

Section titled "Methods"

ngDoCheck

Section titled "ngDoCheck"

Inherited from: IgxDropDownItemComponent

A callback method that performs change-detection, invoked after the default change-detector has checked the directive's input bindings in the parent template. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.

 
ngDoCheck(): void

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

Returns void