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
INFRA HERO
15
How to set display member and value member in igx-drop-down?
posted

I am using igx-drop-down for my website to show country data with the use of this dropdown I want to get the key value for the selected country. I don't want to use the loop to iterate.How can I achieve this without using the loop?

Parents
No Data
Reply
  • 1100
    Offline posted

    Hello Hero,

    Thank you for contacting the Infragistics support!

    Using the Drop Down, getting the key value is not available out of the box. So if you do not want to use a loop, what I can suggest is to try the Select component for your scenario. It inherits the Drop Down component and allows getting the text and value keys with no custom implementations.

    I am attaching a project created with the Ignite UI CLI that demonstrates how to get the value and the text of the selected item. Basically, it looks like this:

     

    export class SelectComponent {
    public items: object[] = [ {value: 'us', text: 'USA' }, {value: 'uk', text: 'United Kingdom' } ];

    private handleSelection(event) {
        const selectedValue = event.newSelection.value;
        const selectedText = event.newSelection._text;
    }
}

    You may find more information on the Select component here - https://ko.infragistics.com/products/ignite-ui-angular/angular/components/select.html#select-with-groups . As you would see, it actually uses the Drop Down component internally.

    Please, let me know if this approach is not suitable for your project.

    Thank you once more for using Ignite UI for Angular!

    Best regards, Alexander Marinov

     4606.sample.zip

Children
No Data