Templating fails when using any *ng directives #1655

Closed
brian428 opened this Issue Dec 22, 2016 · 9 comments

Projects

None yet

5 participants

@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
photostu commented Jan 2, 2017

+1

@ilianiv
ilianiv commented Jan 5, 2017

Same at primeng@1.1.3

@Prontsevich Prontsevich added a commit to Prontsevich/primeng that referenced this issue Jan 6, 2017
@Prontsevich Prontsevich Fixed #1655 9ff586a
@Prontsevich Prontsevich referenced this issue Jan 6, 2017
Closed

Fixed #1655 #1748

@Prontsevich

When we reviewed the NgFor, NgIf, and NgSwitchbuilt-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 NgSwitchall 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
brian428 commented Jan 6, 2017

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

@cagataycivici cagataycivici self-assigned this Jan 9, 2017
@cagataycivici cagataycivici added the defect label Jan 9, 2017
@cagataycivici cagataycivici added this to the 2.0 milestone Jan 9, 2017
@cagataycivici cagataycivici changed the title from PrimeNG 1.1.1: Template render fails when using *ngIf within template to Templating when using any *ng directives Jan 9, 2017
@cagataycivici cagataycivici changed the title from Templating when using any *ng directives to Templating fails when using any *ng directives Jan 9, 2017
@cagataycivici cagataycivici added a commit that closed this issue Jan 9, 2017
@cagataycivici cagataycivici Fixed #1655 b16e346
@cagataycivici
Member
cagataycivici commented Jan 9, 2017 edited

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?

@cagataycivici
Member

23rd, next week.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment