angular 2 - how to set <select> default selected option

Question

My template is like this

  AM
  PM

How can I set optio

Answer 1

The old pure HTML way simply works with Angular2, if you do not want to do anything dynamically:

<select>
  <option selected>AM</option>
  <option>PM</option>
</select>

But the following is the Angular 2 way which allows you to dynamically assign selected value, which may be the practical and common use case: (You need to import FormsModule)

<select [(ngModel)]='selectedValue'>
  <option value='AM'>AM</option>
  <option value='PM'>PM</option>
</select>

and in your component class

selectedValue = 'AM'; // You may assign 'AM or 'PM' dynamically here

The following links may be useful:

https://angular.io/api/forms/NgSelectOption

https://angular.io/api/forms/NgModel

The above mentioned Angular 2 method is template driven forms method. There is another way of doing the same which is reactive forms approach described bellow: (You need to import ReactiveFormsModule)

<select [formControl]='control'>
  <option>AM</option>
  <option>PM</option>
  </select> 

and in your component class

control = new FormControl('AM');

The following link may be useful:

https://angular.io/api/forms/FormControlDirective