Templating fails when using any *ng directives

[brian428]

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)
Plunkr to demonstrate the bug with PrimeNG 1.1.1: https://plnkr.co/edit/BQAjYy?p=preview

Current behavior
If *ngIf is used in a <template> inside <p-dataList> (and p-orderList, and probably other components that iterate over a template), the render of the initial data seems correct. However, adding new items to the list causes the template rendering to fail.

Expected behavior
Template should render correctly when *ngIf is used in the template.

Minimal reproduction of the problem with instructions
Plunker at https://plnkr.co/edit/BQAjYy?p=preview reproduces the issue.

• Angular version: Plunkr uses latest from npm.

• PrimeNG version: 1.1.1

• Browser: all

• Language: all

[Prontsevich]

Have the same problem. Initial render works OK but when change items list it fails.

[Prontsevich]

Also when *ngIf is used in a <template> inside <p-autocomplete>

[photostu]

+1

[ilianiv]

Same at primeng@1.1.3

[Prontsevich]

When we reviewed the NgFor, NgIf, and NgSwitch built-in directives, we called out an oddity of the syntax: the asterisk (*) that appears before the directive names.

The * is a bit of syntactic sugar that makes it easier to read and write directives that modify HTML layout with the help of templates. NgFor, NgIf, and NgSwitch all add and remove element subtrees that are wrapped in <template> tags.

We didn't see the <template> tags because the * prefix syntax allowed us to skip those tags and focus directly on the HTML element that we are including, excluding, or repeating.

Reed more on Angular.io

The problem was in declaration of template variable in controls:
@ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;

For the first run everything works good, but when we try to change items collection the itemTemplate take template of NgFor, NgIf, or NgSwitch. And that's why we have broken view.

In my fix I replaced variable declaration to:
@ContentChild('itemTemplate') itemTemplate: TemplateRef<any>;
Autocomplete, Carousel, Chips, Datagrid, Datalist, Datascroller, Dropdown, Listbox, Orderlist and Picklist require a <template #itemTemplate> element and we'll get the correct templateRef in all these controls.

For example:

<p-dataList [value]="cars">
        <p-header>
            List of Cars
        </p-header>
        <template let-car #itemTemplate>
            {{car.brand}}
        </template>
</p-dataList>

[brian428]

Great, thanks! Any idea when this will get pushed out in a release?

[cagataycivici]

pTemplate is required now;

<template let-car pTemplate="item"

item name is optional but suggested to separate with other potential template types in future the component may get.

Note that this is a breaking change.

[Prontsevich]

Great! Any idea when this will get pushed out in a release?