How to bind selected value to dropdown list in Angular 4

You can do something like this :

<select class='select-option' required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
    <option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>

So whenever option is changed , the value is stored in optionSelected in your ts,

options = [1, 2, 3];
optionSelected: any;

onOptionsSelected(event){
 console.log(event); //option value will be sent as event
}

(fixed functionName in template and the ts to be the same)


(ngModelChange)='onOptionsSelected($event)'

onOptionsSelected($event){
 console.log($event);
}

Tags:

Angular