CODEWITHSUNDEEP
angularprimengprimeng-dropdowns
user16558324
user16558324

Reputation:

PrimeNG Dropdown - How to set two value in one optionLabel

I want to set two values in one label. As an example, if I open the 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>

Upvotes: 3

Views: 8466

Answers (2)

Reda
Reda

Reputation: 61

Try using the <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>

Upvotes: 6

Yong Shun
Yong Shun

Reputation: 51115

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

Upvotes: 7

Related Questions