Mate Mate - 6 months ago 52
HTML Question

Angular2 syntax in W3C HTML Validator

Angular 1.x allowed to put elements in HTML, which were not known for W3C HTML Validator. Workaround for this was to add

data-
prefix and write e.g.
data-ng-repeat
instead of
ng-repeat
.

In the current Angular 2 version we have a different syntax. This syntax is also case-sensitive, e.g. we have to use
ngClass
, not
ngclass
.

All brackets used in Angular2 are causing HTML validation errors. Fortunately there is also a canonical form, so instead of
(event)
we can go with
on-event
, instead of
[property]
we can go with
bind-property
and instead of
[(ngModel)]
we can use
bindon-ngModel
. All those things work with
data-
prefix.

But what with directives like
*ngFor
,
*ngIf
and
*ngSwitch
? What with template variables
#variable
? Do you know any workaround in order to make Angular 2 template with those things a valid HTML in W3C Validator?

Answer

You have to use the canonical form. The * is for structural directives which can be used with the <template> tag. With * the template is implicit, but you can always use an explicit template tag instead and with this the canonical forms of the bindings you listed above.

See * and <template> in https://angular.io/docs/ts/latest/guide/template-syntax.html