How to display Dropdown selected Item using Angular5/6?

Question

I want to display selected item in Dropdown list based on id.

<div class="formrow" *ngFor='let a of applicantName'>
  <label>Status Selection :</label>
  <select id="AStatus" formControlName="AStatus" class="form-control">
    <option value="0">All</option>
    <option *ngFor="let apt of applicantStatus" [value]="apt.ApplicantStatusID" [selected]="apt.ApplicantStatusID === a.Status">
      {{ apt.ApplicantStatus }}
    </option>
  </select>
</div>

This code is not working and not showing selected option.

I'd bind the dropdown value to a ngModel and this model can be set with the value of id — messerbill
– messerbill, Commented Oct 17, 2018 at 19:06
well, you can use the ngModel and then it will simply set the selected on the value. — Talg123
– Talg123, Commented Oct 17, 2018 at 19:07
You can make use of data-binding on the selected option model. — alokstar
– alokstar, Commented Oct 17, 2018 at 19:07
Show us your ts, how is AStatus defined? Did you try [formControlName]=....? — PeS
– PeS, Commented Oct 18, 2018 at 0:33

Sunil · Accepted Answer · 2018-10-17 19:46:51Z

1

value should be set for select not for option.

<div class="formrow" *ngFor='let a of applicantName'>
  <label>Status Selection :</label>
  <select id="AStatus" [value]="apt.ApplicantStatusID" formControlName="AStatus" class="form-control">
    <option value="0">All</option>
    <option *ngFor="let apt of applicantStatus" [value]="apt.ApplicantStatusID">
      {{ apt.ApplicantStatus }}
    </option>
  </select>
</div>

edited Oct 17, 2018 at 19:46

answered Oct 17, 2018 at 19:13

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martin Parenteau Over a year ago

The value must also be set on the options. Otherwise, the select element cannot match its value with the corresponding option.

Sunil Over a year ago

That make sense. so you can add in both places and check

Sunil Over a year ago

Updated the answer.

Collectives™ on Stack Overflow

How to display Dropdown selected Item using Angular5/6?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related