HTML5 data-* not working with template attributes using ngFor

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I ran across this while coding section 3 of the Angular 2 Tutorial, but it seems relevant to the library at large.

The following HTML solutions are currently working in showing a list of items, but they don’t pass the w3c validation:

<li *ngFor="let hero of heroes"> <li template="ngFor let hero of heroes">

When doing the following, though, only one list item is showing:

<li data-template="ngFor let hero of heroes">

Expected/desired behavior

We should have a valid HTML solution available that shows all items, such as one of the following: <li data-template="ngFor let hero of heroes"> <li data-ngTemplate="ngFor let hero of heroes">

Reproduction of the problem

This is re-producible in any *ngFor loop. I’m not sure if similar attributes like *ngIf and others are seeing issues, but it may not hurt to check these as well.

What is the expected behavior?

Any feature should have an attribute that can validate as HTML5 and still work.

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

The data-* custom attributes allow us to future-proof our pages. The W3C will not add another data-* attribute in the future, so by following this standard, there is no risk of conflicts when a new attribute is added to the specs.

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: All
• Language: TypeScript 1.8.10

[skreborn]

@zoechi I think his problem is that neither <li *ngFor="let hero of heroes"> nor <li template="ngFor let hero of heroes"> are valid HTML snippets (according to W3C), so he would like to use data-template instead.

Warning: Attribute *ngfor is not serializable as XML 1.0. Error: Attribute *ngfor not allowed on element li at this point. Error: Attribute template not allowed on element li at this point.

Honestly, I think this just adds complexity, and it’s not the source that should be W3C compliant, but the generated page.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}