Angular Template parse errors when add ul inside p tag

Issue

I am developing demo project, work fine if i not add UL tag inside P tag.

Working Code:

<p>
<br/> Umesh test help <br/>
</p>
<ul>
<li *ngFor="let user of help2Listdata">
    <a routerLink="/details/{{user.hid}}">{{ user.hid }}</a>

    <ul>
        <li><a href="http://{{ user.name }}">{{ user.name }}</a></li>
        <li>{{ user.ans }}</li>
    </ul>
</li>
</ul> 

non working code:

<p>
<br/> Umesh test help <br/>

<ul>
    <li *ngFor="let user of help2Listdata">
        <a routerLink="/details/{{user.hid}}">{{ user.hid }}</a>

        <ul>
            <li><a href="http://{{ user.name }}">{{ user.name }}</a></li>
            <li>{{ user.ans }}</li>
        </ul>
    </li>
</ul>
</p>

Error trace:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
        </li>
    </ul>
[ERROR ->]</p>"): ng:///Help2Module/Help2Component.html@13:0
Error: Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
        </li>
    </ul>
[ERROR ->]</p>"): ng:///Help2Module/Help2Component.html@13:0
    at syntaxError (compiler.js:486)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
    at compiler.js:3202
    at Object.then (compiler.js:475)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:3202)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14914)
    at compiler.js:34420
    at Array.forEach (<anonymous>)
    at compiler.js:34419
    at syntaxError (compiler.js:486)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
    at compiler.js:3202
    at Object.then (compiler.js:475)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:3202)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/esm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14914)
    at compiler.js:34420
    at Array.forEach (<anonymous>)
    at compiler.js:34419
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Please let me help to understand why am facing this issue. when i see the working code output in inspect mode it seems fine but when change the tag tree structure it throw above error in browser console.

Solution

Actually ul tag is not allowed inside p tags according to the w3c spec. This will fail. Try using other tag such as div or ng-content.

EDIT: Acording to the W3C spec,p tags can olny contain “Phrasing elements”, this can only be in following tags:

a
em
strong
small
i
b 

See full list…

Answered By – Lucas

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.