How can I recognize the event related to the click on the default first element into a dropdown menu?

562 Views Asked by At

I have the following problem using Angular and the PrimeNG DropDown element, this one: https://www.primefaces.org/primeng/#/dropdown

Note before to start: as you can see in the previous page this element is always associated with a list whose first element is a fake label like "Select City", something like this:

this.cities1 = [
    {label:'Select City', value:null},
    {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
    {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
    {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
    {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
    {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
];

In my project I have something like this:

const AOO_LIST: Aoo[] = [
    { Name: 'AOO-1', Value: 'AOO-1' },
    { Name: 'AOO-2', Value: 'AOO-2' },
    { Name: 'AOO-3', Value: 'AOO-3' }
];

it directly contains the voices and I have not a first "select something" voice in my list. I prefear that it is automatically shown the first real element of my list.

But in this way I have a problem because I have something like this in my view:

<p-dropdown [options]="aooList"
            [(ngModel)]="selectedAoo"
            optionLabel="Name"
            (onChange)="onChangeAoo($event)">
</p-dropdown>

As you can see I have setted a method for the (onChange) event in this code (because when the user choose an element from this list some operation have to be performed and a second dropdown menu must be shown in the page).

It works fine if I select the second or the third element in this dropdown menu but the event is not performed if I select the first one because in my dropdown menu the first one is the default one so selecting it there is not a change and the onChange event is not triggered.

So...my question is: exist a way to recognize the selection of the first element (even if there is no real change) or the only solution is to insert a first "select an item" element in my list?

0

There are 0 best solutions below