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:

  AM
  PM

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)

  AM
  PM

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)

  AM
  PM
   

and in your component class

control = new FormControl('AM');

The following link may be useful:

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