acostela acostela - 1 month ago 14
TypeScript Question

angular2 input not self close

I'm learning a bit of angular2 and I can't find info about this issue. When I don't self close an tag I get a parse error. This is so strange for me. Furthermore, it seems to be a bug but I can't find any reason or discussion about this.

@Component({
selector: 'my-app',
template: `<h1>My First Angular App</h1>
{{greeting}}
<br/>
{{product.id}} {{product.name}} {{product.price}}
<br/>
<span [innerHtml]="product.id"></span>
<span [innerHtml]="product.name"></span>
<span [innerHtml]="product.price"></span>
<br/>
<input [(ngModel)]="product.id"/> //Here is working correctly
`
})


If I do the same but in this way I get the parse error.

@Component({
selector: 'my-app',
template: `<h1>My First Angular App</h1>
{{greeting}}
<br/>
{{product.id}} {{product.name}} {{product.price}}
<br/>
<span [innerHtml]="product.id"></span>
<span [innerHtml]="product.name"></span>
<span [innerHtml]="product.price"></span>
<br/>
<input [(ngModel)]="product.id"></input> //Here I get a Parse error
`
})


Any help info or link about this error will be so helpful. Thank you

Answer

The input tag is a void element, thus has to be self-closing. The Angular 2 template parser is just very strict about it.

The HTML sepcification gets more specific on this topic:

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

Other void elements are: area, base, br, col, command, embed, hr, img, keygen, link, meta, param, source, track and wbr.