Class IgxDropDownItemBase

An abstract class defining a drop-down item: With properties / styles for selection, highlight, height Bindable property for passing data (value: any) Parent component (has to be used under a parent with type IDropDownBase) Method for handling click on Host()

Hierarchy

Implements

  • DoCheck

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

id

id: string = `igx-drop-down-item-${NEXT_ID++}`

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

IgxSelectItemComponent

isHeader

isHeader: boolean

Sets/gets if the given item is header

 // get
 let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemHeader = mySelectedItem.isHeader;
 <!--set-->
 <igx-dropdown-item *ngFor="let item of items">
     <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true">
         {{item.field}}
          </div>
 </igx-drop-down-item>

role

role: string = "option"

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

 <igx-drop-down-item [role]="customRole"></igx-drop-down-item>

value

value: any

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;

Accessors

disabled

  • get disabled(): boolean
  • set disabled(value: boolean): void
  • 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 IgxDropDownGroup will always count as disabled

    Returns boolean

  • 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 IgxDropDownGroup will always count as disabled

    Parameters

    • value: boolean

    Returns void

focused

  • get focused(): boolean
  • set focused(value: boolean): void
  • Sets/gets if the given item is focused

     let mySelectedItem = this.dropdown.selectedItem;
     let isMyItemFocused = mySelectedItem.focused;

    Returns boolean

  •  <igx-drop-down-item *ngFor="let item of items" focused={{!item.focused}}>
         <div>
             {{item.field}}
         </div>
     </igx-drop-down-item>

    Parameters

    • value: boolean

    Returns void

index

  • get index(): number
  • set index(value: number): void
  • The data index of the dropdown item.

    // get the data index of the selected dropdown item
    let selectedItemIndex = this.dropdown.selectedItem.index

    Returns number

  • The data index of the dropdown item.

    // get the data index of the selected dropdown item
    let selectedItemIndex = this.dropdown.selectedItem.index

    Parameters

    • value: number

    Returns void

selected

  • get selected(): boolean
  • set selected(value: boolean): void
  • Sets/Gets if the item is the currently selected one in the dropdown

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

    Returns boolean

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

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

    Parameters

    • value: boolean

    Returns void

Methods

ngDoCheck

  • ngDoCheck(): void