Angular component how to nest unordered list <ul> inside paragraph <p>?

Question

Angular throws an error when the following markup is present in an angular component's template.

Template parse errors: Unexpected closing tag "p"

---

<p>
  paragraph begins.
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</p>

how to achieve this kind of nesting.?

Answer 1

• A paragraph cannot contain a list.

• A list cannot contain a paragraph unless that paragraph is contained entirely within a single list item.

Because p and ul are element rendered as block.