primeng p-dropdown not firing change event

Question

I'm using primeng 5.2.4 and I'm trying this:

<p-dropdown [options]="months" [(ngModel)]="selectedMonth"
   (change)="selectMonth()"></p-dropdown>

The selectMonth method gets called when the page first loads but not on subsequent selections from the drop down list. If I change this to a click event it works (but I get one event when the dropdown is clicked and another when the value is chosen).

Any ideas on what I might be doing wrong? I rolled back to 4.3.0 and see the same behavior.

Thanks!

Recount

Answer 1

The primeng dropdown supports an event onChange that can be looked for any change in the drop down

app.component.html

<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

app.component.ts

onChange(event) {
    console.log('event :' + event);
    console.log(event.value);
}

This should help

Photoluminescence

I feel a little stupid, but sometimes you cannot see the trees for the forest :) – Recount

We tend to use the dom events as we are very much indulged with DOM :) – Photoluminescence

Thanks. Why (change)="xxx()" not working, but only (onChange) is working. In case, of click just (click)="xxx()" works (onClick) is not needed. Quite inconsistent :-( – Gallicize

Onchange is an event of p-dropdown which is triggered by it on something changed in dropdown and we are interested in it. Change is a DOM event which is not triggered by the component and here lies the confusion. – Photoluminescence

Where can I find primeNg documentation to read about possible events of p-dropdown – Papilloma

p-dropdwon docs primefaces.org/primeng/#/dropdown events list are in the end of page – Shinbone

also you need to use primeng interface for as array of available values. in this format { label:'a',value:'AA' } . because the pass the value key from this interface to the $event.value – Shinbone