Hi Alex,

Thank you for your feedback!

Since the drop-down selection event contains a reference to the whole `IDropDownItemBase` item, you can bind the whole object reference to item's `value` property and then handle which property you want to write to the DB service.

public handleSelectionChange(event: ISelectionEventArgs) {
        /**
         * `selectedItem.value` can contain a reference to the **data entry**,
         * thus containing **all** of the needed properties
         * Only the appropriate `valueKey` property (in this case - `id`)
         * can still be passed to the selection by doing the following:
         */
        this.dbService.selectItem(event.newSelection.value.id);
    }

Bind the selection service (called `DataService` in the example) with a subscription and have it update the selected item in the drop-down each time the value changes:

public ngAfterViewInit() {
      requestAnimationFrame(() => {
        this.dbService.selectedItem.pipe(takeUntil(this.destroy$)).subscribe((selected: any) => {
                this.dropDown.selectItem(this.dropDown.items.find(item => item.value.id === selected));
            });
      })
    }

Then, in the template, just take the value of the drop-down's selected item (which is now set to the whole data item) and access the text property (`text` in the example):

		From Value
	
	

		{{dropdown.selectedItem?.value.text }}
	

Alternatively, the approach with accessing the selected item's innerHTML is still applicable.

		Element Text
	
	

		{{dropdown.selectedItem?.element.nativeElement.innerHTML }}
	

If you do not want to access the drop-down's selected item in order to get the text, but want to rely solely on the DataService's selected value, you can create a pipe that extracts the text from the items collection (which you have independent access to):
Define a pipe that finds the selected item in a collection and returns its `text` property

/**
 * @param allItems: the collection of items from which the selected item text should be extracted
 * @param valueKey: the property of the entry that is written to the DB
 * @param displayKey: the property of the entry that should be displayed
 * @param selectedValue: the value currently marked as selected in the DB Service
 */
@Pipe({
  name: 'value'
})
export class ValuePipe implements PipeTransform {

  transform(allItems: any[], valueKey: any, displayKey: any, selectedValue: any): any {
    if (valueKey === null || valueKey === undefined || displayKey === null ||
      displayKey === undefined || allItems.length === 0) {
      return '';
    } else {
      return selectedValue !== null && selectedValue !== undefined ? allItems.find(e => e[valueKey] === selectedValue)[displayKey] : '';
    }
  }
}

And call the pipe in your component template to access the text:

		From Service
	
	

		{{ items | value:"id":"text":(dbService.selectedItem | async) }}
	

All of the above 3 approaches can be seen in action in this updated StackBlitz sample.

Alternatively, if you would like to take advantage of Angular's `Two way binding`, you should also take a look at the `IgxSelect` component, which supports value binding out of the box.

I hope this is helpful!

Hi Alex,

Thanks for reaching out!

In the above scenario, you can access the selected item's text using one of the following approaches:

1. Set the item's value to `[value]="selectedOption"` and access it via `dropDown.selectedItem?.value.text`

2. With the value input being as is, access the inner text of the selected drop-down item with `dropDown.selectedItem?.element.nativeElement.innerText`

You can see both of the above cases in this StackBlitz Example.

The drop-down items do not have a specific input for their displayed text, as that is fully templatable and not necessarily only dependent on the `value` object.

Hope this was helpful!