Angular2 and W3C HTML validation

Question

I'm developing an app with Angular2 and since I use directives or custom tags in the code, it can't be validated by W3C HTML validation.

For example if I use <my-component> element or *ngIf directive or some one way/two way binding elements, such as (click) or [(ngModel)], it can't be valid for any W3C validator.

I think I should replace them with elements that are validable.

So, starting from Angular2 documentation, I created the following summary for replacement:

• (event) --> data-on-event
• [property] --> data-bind-property
• [(ngModel)] --> data-bindon-ngModel
• *ngFor="let i of items" --> data-template="ngFor let i of items"
• *ngIf="condition" --> data-template="ngIf:condition"

Is this the right way for every element of my list to write code that is compliant with W3C standards?

Answer 1

You can "unpack" the *ngFor (and so on) syntactic sugar.

An excellent explanation of this is actually offered in the Tour of Heroes angular 2 tutorial (looking for link...)

Ah found it.

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

Go to the "* and Template" section.