Primeng: Ability to use custom object in dropdown and access its properties in ng-template

[agilehobo]

[ ] 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
I found this https://github.com/brtnshrdr/primeng/commit/d7387f64fd27d1d657a3abfac6c073482d1579a2 but it seems doesn't work.

I have a collection of

{
  id: 1,
  name: 'The Name',
  description: 'The Description'
}

I need to transform id/name to label/value to display in dropdown and also there is no way to access 'description' in ng-template (similar to DataTable)

Expected behavior
It would be good to have ways to define mapping for label/value instead of transforming ourselves. And if we can access other properties in ng-template that would be great.

Please tell us about your environment:

• Angular version: 4.x
  

• PrimeNG version: 4.1.3
  

• Browser: [all]
  

• Language: [all]

[cagataycivici]

You need to use SelectItem API and pass this object to the value field.

<ng-template let-opt pTemplate="item">
   {{opt.value.description}}

[jboothe]

It would be fantastic if this feature would support any object. We run into this issue frequently and have to convert our lookup data to SelectItem which adds the unnecessary complexity of managing two datasources.

For example: dropdown list of author objects that must be assigned as an author object on a book. Since the SelectItem object cannot be assigned to the book, must search for the original author object in the original author list and substitute it for the SelectItem before assignment to the book.

[MarMic1]

We run into the same issue like @jboothe.

It would be great if this feature could be added. @cagataycivici

[jboothe]

I am not a big fan of mixing libraries, but I cannot work with the PrimeNG dropdown any more. I'm finally done serializing/deserializing lists, managing multiple lists, no-binding unless using a SelectItem, and dealing with one change event if using SelectItem and a totally different event signature when using a custom object.

So I've added the Angular Material dropdown (aka mat-select) to my project and my developer joy and sanity has returned. Of course at the expense of a slightly larger project file size, but fortunately that's not prime concern with our current project.

mat-select has an elegant, intuitive API and powerful control over any list of POJOs. IMO, separating select and options into two components is what makes the difference. Here's an example I put together that illustrates some of its capabilities.

I am a fan of PrimeNG, but their lack of attention to this issue does not inspire confidence. Hopefully, PrimeNG will rebuild their dropdown with support for POJO first and SelectItem second.