0

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

enter image description here

2
  • In options you want name + capital and when it is selected you want only name am i getting right? Commented Feb 7, 2020 at 7:01
  • Yes, Absolutely Commented Feb 7, 2020 at 7:02

2 Answers 2

4

You can't have a div inside your option. If you want to have some special formatting inside a dropdown you have to recreate the dropdown with JS (or use, for example, angular material)

So to only display the name, you can do the following:

<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">
                {{country.name}}
      </option>
</select>
Sign up to request clarification or add additional context in comments.

3 Comments

Is there any example with angular material?
added a link to my post.
Thanks for that. But that does not meet my requirement
-1
  <select [(ngModel)]="selectedDevice"  placeholder="Select" (change)="displayFunction($event.target.value)">
                  <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 *ngIf="selectedDevice!=country.name">{{country.capital}}</p>
                   </div>
          </option>
     </select>

Replace this line

3 Comments

you want to print name from select on change event right ?
No. That I can do. But what I want to do is to display the selected name in the dropdown.
In the above attached image the selected value is shown as name + capital. I want only name

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.