angular 2 select options default value

Question

I can't seem to work out how to easily set a value as the default value for a select dropdown list.

My current code

<select class="form-control" ngControl="modID" #modID="ngForm">
       <option *ngFor="let module of modules" [value]="module._id">{{module.moduleName}}</option>
</select>

i have tried playing with the [selected] decorator but cannot work out how to get it to work.

given i have this modInst json object below:

{
"_id": 5,
"semester": "Tri 3",
"year": 2018,
"__v": 0,
"modID": [
  {
    "_id": 6,
    "moduleLeader": "Jake Groves",
    "moduleName": "Software Implementation",
    "__v": 0
  }
]
},

i would like the modInst.modID[0]._id to be selected from all the modules._id (modules) is whats populating the select list

any easy way of doing this?

edit:

i've tried adding [selected]="module._id == modInst.modID[0]._id" but i get no success on it making it the selected value

i've also tried [ngValue]="modInst.modID[0]._id" and it still doesn't select the module with id 6 in the list

one last addition ... i've tried a manual 'selected' and it still does not make a selected value upon load [selected]="module._id == '7'"

score 11 · Accepted Answer · edited May 23 '17 at 11:54

You can use [(ngModel)] to do this.

<select [(ngModel)]="selectedModule">
     <option *ngFor="let module of modules" [value]="module._id">    {{module.moduleName}}/option>
   </select>

For example

import { Component } from '@angular/core';

@Component({
  selector: 'awesome-component',
  template: `
    <select [(ngModel)]="selectedModule">
     <option *ngFor="let module of modules" [value]="module._id">    {{module.moduleName}}/option>
   </select>
  `
})
export class AwesomeComponent {

modules: any[];
selectedModule: any = null;

loadModules(){
  //load you modules set selectedModule to the on with the
  //id of modInst.modID[0]._id you can either loop or use .filter to find it.

  }
}

Where you load the models from JSON in your component create a variable for the selectedModule and set the value equal to the module with the matching ID. See this answer here for an example of how to use ngModel on a select input:

Binding select element to object in Angular 2

Also selectedModule will reflect the value of the currently selected item if you need to enable / disable inputs etc based on a selection.

Plunker example

[value] works since the original question is using a number/string id. However if you want to use other types such as an object you should use [ngValue].

ahh snap that makes so much sense! didn't realise biding to the select element was as simple as that ... i did it so when 'toggleEditing' function is triggered it sets selectedValue as the id xD wow thanks so much! — Jezyk Danzowki, Jul 30 '16 at 23:04
This does not work as expected. In this case 'selectedModule" will become equal to the value of the selected option => the ID of the module. Not the module object itself. This breaks everything when you want the full object. The only way I could get it to auto preselect an option is when [ngValue] (not [value] which could only be used with strings or numbers) is the same object as "selectedModule". — mp3por, Mar 20 '17 at 17:48
@mp3por I added a working plunker. value works with strings and numbers as is in the original question. I also updated the answer to state if you are using anything else such as objects you need to use [ngValue]. — kmcnamee, Mar 20 '17 at 18:40

angular 2 select options default value

1 Answers1