I am facing an issue with <select> tag in angular 5. I have an array of objects. Lets say
public countryList = [ {
'name': 'xxx',
'capital': 'abc'
}, {
'name': 'yyy',
'capital': 'efg'
}, {
'name': 'zzz',
'capital': 'pqr'
},
];
and in html
<select placeholder="Select" (change)="displayFunction()">
<option class="auto-height" *ngFor="let country of countryList; let id=index"
[disabled]="id === (country .length)-1" [value]="country .name">
<div class="stop-container">
<b>{{country.name}}</b>
<p>{{country.capital}}</p>
</div>
</option>
The issue comes when we select any option in the dropdown all the values listed inside<option> is shown as the slected value. I need only name as selected value. Any solution for this? I am getting output given below. What is need is XXX instead of XXX abc
