Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Alex P
125
How can i access the selected text
posted

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.
Parents
No Data
Reply
  • 80
    Offline posted

    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!

Children