how to set two value in one optionLabel? in Angular PrimeNG

Question

I want to set two values in one label. As an example, if I open dropdown it should show as

"value1 value2"

in one line with space. value1 and value2 data are getting from the database. I tried using the below method but it has not worked.

<p-dropdown [options]="divitionArr" name="business_divition" [(ngModel)]="project.business_divition" optionLabel="{'first_name','last_name'}" optionValue="divition" #diviSel="ngModel"></p-dropdown>

Answer 1

Would suggest that add a new field, displayLabel into the element of the array that is used for the optionLabel. And next, you decide the desired output for displayLabel.

.component.ts

ngOnInit() {
  this.divitionArr = this.divitionArr.map((divition: any) => {
    return {
      ...divition,
      displayLabel: divition.first_name + ' ' + divition.last_name
    };
  });
}

.component.html

<p-dropdown
  [options]="divitionArr"
  name="business_divition"
  [(ngModel)]="project.business_divition"
  optionLabel="displayLabel"
  optionValue="divition"
  #diviSel="ngModel"
>
</p-dropdown>

Sample Demo on StackBlitz

Answer 2

try using an ng-template like this:

      <label for="operatingSystem">Operating System</label>
      <p-dropdown id="operatingSystem" [options]="operatingSystems" [(ngModel)]="application.operatingSystem"
                  placeholder="Select an Operating System"  [showClear]="true">
        <ng-template let-operatingSystems pTemplate="item">
          <div class="flex align-items-center operatingSystems-item">
            <div>{{operatingSystems.name}} {{operatingSystems.version}}</div>

          </div>
        </ng-template>
      </p-dropdown>**strong text**