Thanks, i tried to move straight to your Drop down but i cant find a solution for the following situation.
I have a Text and Value for each item in the drop down box. I can click on drop down and get the list of Text fine but when i click on it , i don't want to display the value , i want to display the text in the drop down box.
For example user selects France which has an value of FR but i still want the list to show the text of France and then when i have to submit my form i will send the value of the selected item instead of the Displayed Text.

Here is what i played around with

https://stackblitz.com/angular/emvybdgvxel

Here is the Code i am using to create the DropDown

<form novalidate [formGroup]="form">
    <igx-input-group #inputGroup class="input-group" [igxToggleAction]="dropDown">
        <input #input class="input"
               type="text"
               igxInput
               [igxDropDownItemNavigation]="igxDropDown"
               readonly= "true"
               placeholder="{{placeholder}}"
               formControlName="selected"
               (keydown.ArrowDown)="openDropDown()"/>
        <label *ngIf="label && label.length" igxLabel>{{label}}</label>

        <igx-suffix igxButton="icon"
                    class="dropdownToggleButton"
                    igxRipple>
            <igx-icon *ngIf="igxDropDown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
            <ng-template #toggleUp>
                <igx-icon fontSet="material">arrow_drop_up</igx-icon>
            </ng-template>
        </igx-suffix>
    </igx-input-group>

    <igx-drop-down #dropDown (onSelection)="onSelection($event)">
        <igx-drop-down-item *ngFor="let option of options"
                            [value]="option.value"
                            [isSelected]="option.name === selected.value">
            {{ option.name }}
        </igx-drop-down-item>
    </igx-drop-down>

</form>