Primeng: Custom Content doesn't work as expected on Dropdown control

[battmanz]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] 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

Plunkr Case (Bug Reports)

https://plnkr.co/edit/VgavKnhrMRWDcuUl2sTW?p=preview

Current behavior

This doesn't work:

export class AppComponent implements OnInit {

  items: { code: string, description: string }[];
  selectedItem: any;

  ngOnInit() {
    this.items = [
      { code: 'A', description: 'Apple' },
      { code: 'B', description: 'Banana' },
      { code: 'C', description: 'Cherry' },
      { code: 'D', description: 'Donut' },
      { code: 'E', description: 'Eclair' }
    ];
  }
}

<p-dropdown [options]="items" [(ngModel)]="selectedItem" dataKey="code">
  <ng-template let-item pTemplate="item">
    {{item.code}} - {{item.description}}
  </ng-template>
</p-dropdown>

Expected behavior

I should be able to bind any object to the Dropdown component (not just those that have label and value properties) using ng-template.

Minimal reproduction of the problem with instructions

See https://plnkr.co/edit/VgavKnhrMRWDcuUl2sTW?p=preview

What is the motivation / use case for changing the behavior?

This would allow the Dropdown control to bind to any type of object as the options. This makes sense because the presentation layer should not dictate what the model looks like.

Please tell us about your environment:

Windows 8, vscode, npm, webpack-dev-server

• Angular version: 4.0.0
  

• PrimeNG version: 4.0.0
  

• Browser: all
  

• Language: TypeScript 2.2.0

• Node (for AoT issues): node --version = 6.9.2

[battmanz]

Closing this because I can accomplish the same thing with a pipe.

[PrajAmit]

Can you please update the sample code with the modified version.
Thanks

[battmanz]

@PrajAmit I cancelled this pull request because I found I can already do everything I need. See the discussion in #2565.

[ningacoding]

Still a problem. Custom Content of Dropdown not working as expected:

<p-dropdown [options]="aList"
[(ngModel)]="aVar"
[autoWidth]="false"
optionLabel="nombre"
filter="filter">
<ng-template let-something pTemplate="selectedItem">
<div class="ui-helper-clearfix">
{{something.nombre}}
</div>
</ng-template>
<ng-template let-something pTemplate="item">
<div class="ui-helper-clearfix">
{{something.nombre}}
</div>
</ng-template>
</p-dropdown>

You can switch between those properties:

optionLabel="nombre"
filter="filter"

If you remove it, dropdown works, but when exists one or both, dropdown doesn't work as expected.

Ussing: PrimeNG ~5.2.5

[tburger]

It isn't a problem
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 follows:

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