Primeng: Template support for selected item in Dropdown

[amitdahan]

I'm submitting a ...

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
You set up an <ng-template> for a <p-dropdown> component, your template successfully appears on the dropdown selection menu, but not when an item is selected.

Expected behavior
I'd expect that if I style an item with a template, it'd be styled both in the selection menu and when the item is selected.
(I can understand the complication of this, but maybe if I had a different approach available, for example setting a pipe chain to the label (which would ensure the label remains a text value, and not a complete "template" which can be anything).

Minimal reproduction of the problem with instructions
https://plnkr.co/edit/Le9tpxsgLsH6u8rvqjQX?p=preview
In this plunk I have both dropdowns with values 1, 10, 100, 1000, 10000, both showing different currencies, I'd like this to show when an item is selected as well, without modifying my option source if possible.

What is the motivation / use case for changing the behavior?
Everything is doable by changing the options data source, but I feel it would make it more declarative by having using the existing data source and simply defining a template which would affect both the selected item and items in the selection menu (or a separate template for the selected item)

• Angular version: 5.0.2

• PrimeNG version: 5.0.0

• Browser: all

• Language: all

[cagataycivici]

Implemented via new selectedItem template;

    <p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
        <ng-template let-item pTemplate="selectedItem">
            <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
            <span style="vertical-align:middle">{{item.label}}</span>
        </ng-template>
        <ng-template let-car pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
                <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
            </div>
        </ng-template>
    </p-dropdown>

[amitdahan]

thank you! 👍 🥇

[lethuan692]

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
        <ng-template let-item pTemplate="selectedItem">
            <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
            <span style="vertical-align:middle">{{item.label|translate}}</span>
        </ng-template>
        <ng-template let-car pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
                <div style="font-size:14px;float:right;margin-top:4px">{{car.label|translate}}</div>
            </div>
        </ng-template>
    </p-dropdown>

i test with the code above.
template for item, it's oke but the template for selectedItem can't show label with translate.

[woworks]

Cannot make selectedItem template work either.
version: 5.0.2

[pierfreeman]

Me neither, instead of the selectedItem template I see only the item label

[fleboulch]

Same for me. I can't add template for selectedItem.
version: 5.0.2

[jzaric]

Works fine for me after updating to:

"@angular/cli": "1.6.7"
"@angular/[all packages]": "5.2.3"
"primeng": "5.2.0"

[mlangwell]

I have updated to:

"@angular/cli": "1.6.7"
"@angular/[all packages]": "5.2.3"
"primeng": "5.2.0"

and I am having the same issue listed above. My label keeps getting set to empty and is getting the ui-dropdown-label-empty class. If it helps I am using my own object. I am not passing an object like { label: any, value: any }

[jzaric]

@mlangwell Only thing that I may have done in addition is deleting node modules and reinstalling everything. Could be worth a shot.

[mlangwell]

@jzaric that did not work for me. It appears that the problem is that the selectedItem is not reflecting correctly. I have my options that is of type X, then on init I grab an option of the same type and set my selectedItem variable. However, when I make a selection from the dropdown the selectedItem is undefined. Both my options and my selectedItem are of the same type. What is wrong here?

[AndreMantas]

I also can't get selectedItem template to work.

I'm using "primeng": "^5.0.2" is it safe to update to 5.2.0? My site relies a lot on p-datatable...

[cagataycivici]

@AndreMantas , p-dataTable won't be removed, it is just not maintained anymore. It stays as it is so that users can still upgrade.

[AndreMantas]

Datatables seems to be working fine. However my p-tieredMenus are broken. Did something change? Where can i see the changelog?

[anbiniyar]

@mlangwell Thank you for your input. It turns out converting it to exactly {label: string, value: any} did the trick for me. I am not sure if this is a bug or designed this way. Either way, it wasn't evident from the docs.