CODEWITHSUNDEEP
angularbootstrap-modal
AbhiRam
AbhiRam

Reputation: 2061

Bootstrap 3.3.7 Dropdown not displaying selected value

I am new to Bootstrap and I'm Working with the latest Bootstrap 3.3.7. I'm trying to display the selected value when the user selects one of the options. but using my below code its not displaying selected value can some one help me please

html:

 <div class="form-group">
   <label for="department">DepartMent</label>
   <select id="department" name="department" [(ngModel)]="department" class="form-control">
     <option *ngFor="let dept of departments" [value]="dept">
       {{dept.name}}
     </option>
   </select>
 </div>

.ts:

departments: Department[] = [
    { id: 1, name: 'HR' },
    { id: 2, name: 'IT' },
    { id: 3, name: 'DEV'},
    { id: 4, name: 'MG' }
]

Upvotes: 0

Views: 1072

Answers (2)

Mikjail Salazar
Mikjail Salazar

Reputation: 49

Change [value] to value and "dept.id" to {{dept.id}}

<div class="form-group">
    <label for="department">DepartMent</label>
    <select id="department" name="department" [(ngModel)]="department" class="form-control">
      <option selected disabled>Select a Department</option>
      <option  value={{dept.id}} *ngFor="let dept of departments">
       {{dept.name}}
      </option>
    </select>
  </div>

Upvotes: 1

Ajay Ojha
Ajay Ojha

Reputation: 390

replace this '[value]="dept"' to [value]="dept.id".

Upvotes: 1

Related Questions