beerdy beerdy - 4 months ago 21
AngularJS Question

How to bind the tag p in template?

Problem: The

<p>
element does not work. (Angular parser fails to render the tag p)

In 5 Min Quickstart document from official tutorial, this code snippet works fine:

...
template: `
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>`
...


But this code does not work:

...
template: `
<p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</p>`
...


Error in FireBug is as follow:

EXCEPTION: Template parse errors:
Unexpected closing tag "p" ("
<li>2</li>
</ul>
[ERROR ->]</p>
</div>"): AppComponent@14:14


Can someone explain why is that?

Answer

The <p> element doesn't support <ul> as content https://developer.mozilla.org/en/docs/Web/HTML/Element/p

Event though browsers might not complain and display it anyway, it is not valid HTML and the Angular2 parser is strict.

Comments