Custom content dropdown not working in PrimeNG?

Question

I'm implementing a custom content dropdown. Is not working properly. It does not set selectedTestType value and It gives undefined value in the onChangeTestTypes.

<p-dropdown name="classTestTypeCombobox"
            [options]="TestTypes" [(ngModel)]="selectedTestType"
            [style]="{'width':'150px'}" filter="filter"
            [disabled]="this.isProdCodeDisabled"
            appendTo="body"
            required
            #classTestTypeCombobox="ngModel"
            (ngModelChange)="onChangeTestTypes($event)">
    <ng-template let-TestType pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <div>{{TestType.descLong}}</div>
        </div>
    </ng-template>
</p-dropdown>

TestTypes is an array of class object, which has the following members.

id: number;
classificationCode: string;
descLong: string;
classificationParent: string;
codeType: number;

onChangeTestTypes(TestType) {
    this.selectedTestTypeDesc = this.TestTypes.filter(x => x.priceCode == TestType)[0].descLong;
    this.price.Type = this.TestTypes.filter(x => x.priceCode == TestType)[0].Type;
}

Can you include "TestType" field declaration and how you insert values into it? — Ömer, Nov 07 '17 at 19:53

score 5 · Answer 1 · edited Mar 05 '19 at 14:35

5

By looking at the PrimeNG SelectItem, I figured out that the value is both a label and an object, so in the original question the answer would look like this {{TestType.value.descLong}}. My complete solution is like this:

<ng-template let-group pTemplate="item">
    <div style="width: 100%; display: flex;">
        <span style="width:30px;">{{group?.value.Code}}</span>
        <span style="width:60px;">{{group?.value.Description}}</span>
    </div>
</ng-template>

edited Mar 05 '19 at 14:35

karel

5,489
46
45
50

answered Mar 05 '19 at 14:10

Teresa Burger

137
1
3
8

You are my hero! This was not obvious. Even the examples on PrimeNGs site did not make this clear (at least to me). – Mark Jul 05 '21 at 16:39

score 1 · Answer 2 · answered Apr 23 '19 at 14:38

This is how I got the custom drop down to show the selected value when p-dialog opens. Had to add the optionLabel attribute mentioned by @freedeveloper above.

<p-dropdown appendTo="body" id="usertypeID" [options]="userTypesList" [(ngModel)]="user.userType" optionLabel="usertypeName">
<ng-template let-ut pTemplate="item">
    <div class="ui-helper-clearfix" style="position: relative;height:25px;">
      <div style="color:black;">{{ ut.value.usertypeName }}</div>
    </div>
</ng-template>

Below is my model (it is nested under User class):

export class UserType {
    userRoleID : number
    usertypeID : number
    usertypeName : string
}

score 0 · Accepted Answer · answered Dec 06 '17 at 04:02

Use optionLabel with the name of the field that you want to show in the drop down list. For example if you want to use classificationCode

 <p-dropdown name="classTestTypeCombobox"
            [options]="TestTypes" [(ngModel)]="selectedTestType"
            [style]="{'width':'150px'}" filter="filter"
            [disabled]="this.isProdCodeDisabled"
            optionLabel="classificationCode"
</p-dropdown>

Observe that optionLabel does not need [] also the assigned value is simple the name of the custom object field.

This will not work since optionLabel will show only one property and more over here we are trying to show custom content. I am also having same issue. — Ziggler, Dec 19 '17 at 16:20

score 0 · Answer 4 · edited Jan 12 '22 at 19:37

0

Use value.name if your item is {name:'test'}:

<ng-template let-country pTemplate="item">
  <div class="country-item">
    <div>{{country.value.name}}</div>
  </div>
</ng-template>

edited Jan 12 '22 at 19:37

ouflak

2,458
10
44
49

answered Jan 12 '22 at 15:39

Grégoire Maria

51
1
3

Custom content dropdown not working in PrimeNG?

4 Answers4

Linked