ANGULAR2 Select Usage-Set default values and events

Set default values:
Now there are three students xiaoming, Little Red, little black, on two-way bound student set the select value you want can be selected by default in the dropdown box
Code1:
Set "Select" as the default, just set the variable student to ", you can default to" please select "
Scenario 1:

TS:
students:string[]=[' xiaoming ', ' xiaohong ', ' Xiaohei '];
Student:string= ";

HTML:
  <select [(Ngmodel)]= "student" >
        <option value= "" > Please select </option>//Here is value instead of [ Value]
        <option *ngfor= "Let item of Students" [value]= ' item ' >{{item}}</option>  
    </select>

Scenario 2:

TS:
students:string[]=[', ' xiaoming ', ' xiaohong ', ' Xiaohei '];
Student:string= ";

HTML:
<select [(Ngmodel)]= "student" >
  <option *ngfor= "Let item of Students" [value]= ' Item ' >{{ Item | | ' Please select '}}</option>  
</select>

Code2:
When you need to set the default value to Xiaoming, just set the initial value of the variable student to "Xiaoming"

TS:
students:string[]=[' xiaoming ', ' xiaohong ', ' Xiaohei '];
student:string= ' xiaoming ';

HTML:
    <select [(Ngmodel)]= "student" >
        <option *ngfor= "Let item of Students" [value]= ' Item ' >{{item }}</option>  
    </select>

Binding Events
Select drop-down box for selecting events primarily through Ngmodel and Ngmodelchange
If you want to trigger an event when you select an item in the Select drop-down box, you can split [(Ngmodel)] into Ngmodel and ngmodelchange to implement

TS:
students:string[]=[' xiaoming ', ' xiaohong ', ' Xiaohei '];
Student:string= ";
Info:string= ";
SetInfo () {
    this.info=student;
}

HTML:
<select [ngmodel]= "Student" (ngmodelchange) = "student= $event; SetInfo ()" >
    <option value= "" > Please select </option>
    <option *ngfor= "Let item of Students" [value]= ' Item ' >{{item}}</option>  
</select>
{{Info}}

In property bindings, a value is passed from the model to the target property on the screen. We mark the target property by enclosing the name in square brackets, []. This is a one-way data binding from the model to the view.

In event bindings, values are passed from the target property on the screen to the model. We mark the target attribute by enclosing the name in parentheses, (). This is a reverse one-way data binding from view to model.

When the binding target of [(x)] in Angular2, his input and output attributes are represented by X and Xchange.

The student= $event principle in the code is as follows Ngmodelchange is a property of a Angular eventemitter type, and when it fires, it returns the value of the input box.

Click to view more about Ngmodel