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?