27

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!

Michael Witt
  • 1,582
  • 4
  • 22
  • 43

1 Answers1

52

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

WorkaroundNewbie
  • 1,063
  • 9
  • 16
azharuddin irfani
  • 826
  • 9
  • 16
  • I feel a little stupid, but sometimes you cannot see the trees for the forest :) – Michael Witt Apr 10 '18 at 16:55
  • We tend to use the dom events as we are very much indulged with DOM :) – azharuddin irfani Apr 11 '18 at 05:12
  • 2
    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 :-( – Jay Oct 01 '18 at 15:38
  • 2
    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. – azharuddin irfani Oct 02 '18 at 17:52
  • Where can I find primeNg documentation to read about possible events of p-dropdown – rainversion_3 Mar 14 '19 at 15:14
  • 1
    p-dropdwon docs https://www.primefaces.org/primeng/#/dropdown events list are in the end of page – yehonatan yehezkel Apr 08 '19 at 10:32
  • 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 – yehonatan yehezkel Apr 08 '19 at 11:08