Template Parse errors in angular2 template

Question

I have the following template for my angular 2 component, but it is throwing a template parse error.

<div *ngIf="chapter == 1">
        <p><h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4></p>
</div>

this is the error message - what's wrong with my </p> tag?

zone.js:461 Unhandled Promise rejection: Template parse errors: Unexpected closing tag "p" ("gIf="chapter == 1">

   <p><h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4>

[ERROR ->]

</div>

"): chapterComponent@45:77 ; Zone: ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Unexpected closing tag "p" …ROR ->]

↵ ↵ ↵"): chapterComponent@45:77", stack: "Error: Template parse errors:↵Unexpected closing t…st:3000/node_modules/zone.js/dist/zone.js:426:22)"}consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): Template parse errors:(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

Answer 1

The problem is that header h4 in your paragraph! Its no valid HTML code.

https://stackoverflow.com/a/15656988/3631348

Do it without that p ?! Or move the header right before your paragraph..

<h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4>