Custom content dropdown not working in PrimeNG?

Solution 1:

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>

Solution 2:

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
}