Prevent nested paragraphs with ngx-translate in Angular 13

Question

We use ngx-translate to provide multi-language support in an Angular 13 application. This works like a charm except when multiple paragraphs are defined in a translation string. For example the translation ID MULTILINE has the definition:

"MULTILINE": "<p>Paragraph 1</p><p>Paragraph 2</p>"

When using this in the HTML template I need to use innerHTML as the translation contains HTML I don't want to get stripped:

<p [innerHTML]="'MULTILINE' | translate"></p>

In the resulting dom I get (formatting added for readability):

<p>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</p>

How can I prevent the outer p element from appearing? It doesn't matter if the translation string contains the begin/end p tags.

Answer 1

As pointed out by @Amer you need to use outerHTML instead of innerHTML. This does require the proper use of tags in the translation strings.