CODEWITHSUNDEEP
angularprimengprimeng-dropdowns
Vivek Nuna
Vivek Nuna

Reputation: 1

Custom content dropdown not working in PrimeNG?

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;
}

Upvotes: 2

Views: 7580

Answers (4)

Gr&#233;goire Maria
Gr&#233;goire Maria

Reputation: 51

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>

Upvotes: 0

Pranav S
Pranav S

Reputation: 425

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
}

Upvotes: 1

Teresa Burger
Teresa Burger

Reputation: 147

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>

Upvotes: 5

freedeveloper
freedeveloper

Reputation: 4082

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.

Upvotes: 0

Related Questions