Questions & Answers

I have an input type=text where my user will type his own HTML template.
I have a button that opens a modal which shows the formatted html as a "preview html template".

Whenever the user Clicks on my preview_button, it opens a modal that shows the html the user typed before. This is part of the modal, this is how I'm inserting the html:

<div class="flexBox mg-2">
  <span [innerHTML]="my.element.text"></span>
</div>

Although it is working and showing the text correctly. It doesn't allow me to use style formatting. So If my user write this on the text_input

<h1 style="color:red;">Hello World</h1>

When the modal opens, I can see the text but not the color styling.

I found a few topics here suggesting to use this.sanitizer.bypassSecurityTrustHtml, but I also read its kind of dangerous and also it messes all my pages style up, so I can't use it.
And a few examples showing how to do this with a static html(on class constructor).

Any good/correct/safe way to do it when the html is dynamic?