CODEWITHSUNDEEP
angularselect
Femil Shajin
Femil Shajin

Reputation: 1808

Clear Select value in Angular 2

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
}

Upvotes: 3

Views: 10441

Answers (1)

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

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.

Upvotes: 0

Related Questions