How can i access the selected text

Based on your sample i can use 

[value]="dropDown.selectedItem?.value"  to display the value of the selected item which works fine.

But what i want to do is to show the Text of the item the user selected.

i populate the dropdown via ngFor like this

<igx-drop-down #dropDown [width]="'260px'">

      <igx-drop-down-item *ngFor="let selectOption of options" [value]="selectOption.value">

        {{ selectOption.name }}

      </igx-drop-down-item>

  </igx-drop-down>

i looked in the docs but could not find any info on how to access it, i can access index etc nut not text.

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!

Thanks that was somewhat helpful. I could not find any info on that in your docs . So lets say i am using 2 diffrent fields a value and a text in this dropdown where i want to show the user the text but store the value in db which i have covered. How would i go about populating the displayed text when i open an existing form which has this control. If i have a value of 3 for example stored and set the the control to 3 it will show 3 and not the text.

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!