PrimeNG Angular 8 p-dropdown selectedItem template not rendering

Question

Below is my markup for the custom template design for the PrimeNG p-dropdown control

<p-dropdown [options]="list" [(ngModel)]="selectedListItem" (onChange)="selectionChanged($event)">

    <ng-template let-item pTemplate="selectedItem">
      <div class="custom-template-div">
        <div class="pull-left location-icon {{item.value.cssClass}}"></div>
        <div class="header-line pull-left"><b>{{item.value.text1}}</b></div>
        <div class="clearfix"></div>
        <div class="detail-line"><i>{{item.value.text2}}</i></div>
      </div>
    </ng-template>

    <ng-template let-item pTemplate="item">
      <div class="custom-template-div">
        <div class="pull-left location-icon {{item.cssClass}}"></div>
        <div class="header-line pull-left"><b>{{item.text1}}</b></div>
        <div class="clearfix"></div>
        <div class="detail-line"><i>{{item.text2}}</i></div>
      </div>
    </ng-template>

  </p-dropdown>

In this control the <ng-template let-item pTemplate="item"> section is working as expected when the dropdown is listing the items with CSS icons, but when an item been selected, it is not showing in the control, but in the code level the items is selected.

I'm using a custom DTO as below;

export class ListItemDto {
    text: string;
    text1: string;
    text2: string;
    value: string;
    cssClass: string;
}

I'm having issue only with the <ng-template let-item pTemplate="selectedItem"> template where as I have tried item.value to get the object as well as directly item also. Both are not working for me.

Any information would be helpfull. Thanks!

@EhsanKiani that was a typo in posting, I updated. – Sandun Perera Sep 30 '19 at 07:51 — Sandun Perera, Sep 30 '19 at 07:51

score 4 · Accepted Answer · answered Oct 09 '19 at 06:49

4

My colleague found the issue and it is just to have the label and value properties available in whatever the custom DTO we use as the collection. I only had value property.

export class ListItemDto {
    text: string;
    text1: string;
    text2: string;

    label: string;
    value: string;

    cssClass: string;
}

If the custom DTO contains the properties label and value properties along with other custom properties, the selectedItem template will start to work.

answered Oct 09 '19 at 06:49

Sandun Perera

541
6
21

1

also another way to workaround this is to set the optionLabel attribute. then you have access to your custom object in the template via item.value.text1 – gangfish Oct 29 '20 at 12:40
1

thank you for this, been bumping my head for a whole day... they really come up with crappy solutions sometimes – Kerim092 Sep 07 '21 at 12:40

PrimeNG Angular 8 p-dropdown selectedItem template not rendering

1 Answers1