How to get two properties in Onchange event of p-dropdown

Question

Below I have p-dropdown of apple. I want to get apple id and apple desc using onchange, i am only able to see apple id as value in Onchange apple event. can i get both apple id and apple desc in Onchange apple event in Javascript?

        <div class="p-col-12 p-md-4">
                    <div class="p-field">
                        <label for="apple">Apple</label>
    
                        <p-dropdown [options]="apples" name="apple" id="apple" #name="ngModel"
                            [(ngModel)]="fruits.appleId" optionLabel="appleDesc"
                            optionValue="appleId" filterBy="appleId,appleDesc" [showClear]="false"
                            placeholder="Select Item" [virtualScroll]="true" [itemSize]="50" [filter]="true" appendTo="body"
                            (onChange)="onChangeApple($event)">
                            <ng-template let-apple pTemplate="selectedItem">
                                <div>
                                    <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
                                </div>
                            </ng-template>
                            <ng-template let-apple pTemplate="item">
                                <div>
                                    <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                </div>

Here I tried using onchange apple event to get id and desc. event input property here only has apple id, can i get apple desc at same time?

onChangeApple(event) {
        console.log('event :' + event);
        console.log(event.value); //here value is apple id,i also want appledesc here,but i don't see it in event property to get it.
    }   
        

Answer 1

If you want the entire object, then just remove optionValue and optionLabel this will give you the entire object, note: the ngModel will also have the entire object.

HTML:

<div class="p-col-12 p-md-4">
  <div class="p-field">
    <label for="apple">Apple</label>

    <p-dropdown
      [options]="cities"
      name="apple"
      id="apple"
      #name="ngModel"
      [(ngModel)]="appleId"
      filterBy="appleId,appleDesc"
      [showClear]="false"
      placeholder="Select Item"
      [virtualScroll]="true"
      [itemSize]="50"
      [filter]="true"
      appendTo="body"
      (onChange)="onChangeApple($event)"
    >
      <ng-template let-apple pTemplate="selectedItem">
        <div>
          <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
        </div>
      </ng-template>
      <ng-template let-apple pTemplate="item">
        <div>
          <div>{{apple.appleId+ ' - ' + apple.appleDesc}}</div>
        </div>
      </ng-template>
    </p-dropdown>
  </div>
</div>

Stackblitz Demo

---

If you want only the change to contain the entire object, just do an array find operation, to get the entire object.

onChangeApple(event) {
    console.log('event :' + JSON.stringify(event));
    const found = this.cities.find((item: any) => item.appleId === event.value);
    console.log(found); //here value is apple id,i also want appledesc here,but i don't see it in event property to get it.
  }

Stackblitz Demo