Clear Select value in Angular 2

Question

I have a select input where I have to clear the selected value. Here even If if set valueS = null Select is still showing last selected value. When I on the button to clear the selected value from Select. How to achieve it?

    <select (ngModelChange)="onChange($event)" [(ngModel)]="valueS">
        <option value="null" >Add filter</option>
        <option value="Hi">Hi</option>
        <option value="Hey">Hey</option>
        <option value="Hello">Hello</option>
    </select>
<button (click)="clear()">Clear</button>

in Component:

clear() {
    this.valueS = null
}

Answer 1

This is because you are using: (ngModelChange)="onChange($event)" and [(ngModel)]="valueS" both together, Check your console you are getting error. So remove (ngModelChange)="onChange($event)".

Mainly we use (ngModelChange) for onchange you want to do something and still you want to do then try something like this:

 <select name="s" (ngModelChange)="onChange($event)" [ngModel]="valueS">

and

 onChange(e) {
    console.log(e);
    ...
}

See the difference between [(ngModel)] and [ngModel] with (ngModelChange)

Hope this will work.