Angular input events not triggered with ngModel binding

Question

I am currently working on a small angular project and have a problem with input events.

I have following code:

<select (change)="onSelect($event.target.value)" >   
    <option *ngFor="let option of options" [value]="option.id">{{option.name}}</option> 
</select>

This is working fine and well. But I wanted to change it to following:

<select (change)="onSelect($event.target.value)" [(ngModel)]="selectedItem">
    <option *ngFor="let option of options" [value]="option.id">{{option.name}}</option>
</select>

Now after this the change event is not triggered anymore. I also tried [ngModel] and (ngModelChange) and a lot more. But as long as there is something with ngModel and a binding in it the events do not trigger anymore.

All my Angular stuff is in version 5.1.2, the CLI in 1.6.2

Does anyone know why Angular has that behaviour? Greetings and thank you.

I will join the call for this question, the problem I faced was with ngModel, in AOT compilation (using anuglar ng build). It refuses to pick up the event change. — Ayyash
– Ayyash, Commented Dec 31, 2017 at 8:00

Bassem Mamar · Accepted Answer · 2017-12-27 07:56:27Z

1

it could work like this:

<select type="number" [(ngModel)]="selectedItem" >
  <option *ngFor="let option of options" [ngValue]="option.id">{{option.name}}</option>
</select>

Here is working plnkr hope it solve your issue bro :)

answered Dec 27, 2017 at 7:56

Bassem Mamar

3282 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nic Over a year ago

Thank you. But I would still like to have the onChange trigger.

Bassem Mamar Over a year ago

you still able to have, plnkr updated ... check it out again plz

nic Over a year ago

But exactly that is what is not working in my project. [(ngModel)] and a (ngModelChange) together do somehow not work.

Sajeetharan · Accepted Answer · 2017-12-27 06:53:09Z

0

You should use ngModelChange when you are binding value using ngModel

<select (ngModelChange)="onSelect($event.target.value)" [(ngModel)]="selectedItem">
    <option *ngFor="let option of options" [value]="option.id">{{option.name}}</option>
</select>

answered Dec 27, 2017 at 6:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

5 Comments

Sajeetharan Over a year ago

just try with the above [(ngModel)]

nic Over a year ago

That is what I meant. I tried all of the possible combinations of them.

nic Over a year ago

No, that is the funny thing. It works on dmeo and stackblitz. It does however not work in my project. Is there anything you can think of why that might be?

nic Over a year ago

I also tried it in a local new project. There it also works. Only in my project, that is admittedly a bit bigger, it does not work.

Sajeetharan Over a year ago

what is the version

Gaurav · Accepted Answer · 2017-12-27 09:45:03Z

0

You can try this:

<select type="number" [(ngModel)]="selectedItem" >
  <option *ngFor="let option of options" (click)=“selectedItem(option)” [ngValue]="option.id">{{option.name}}</option>
</select>

In component.ts -

optionSelected: any;
selectedItem(option: any) {
if (option) {
 this.optionSelected = option;
} else { 
 this.optionSelected = ‘’;
}
}

Then you can use this.optionSelected according to your need..

answered Dec 27, 2017 at 9:45

Gaurav

4471 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular input events not triggered with ngModel binding

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related