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 4 · Answer 1 · edited Mar 05 '19 at 14:35

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>

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

Custom content dropdown not working in PrimeNG?

3 Answers3

Linked