angular2 input not self close

Question

I'm learning a bit of angular2 and I can't find info about this issue. When I don't self close an <input> 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 1

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.