Angular - Read HTML and Style from text and render it

Question

Let's say I have a strings:

data = 
"<style>
p {
margin-bottom: 0;
}
ul{
margin-top: 0;
}
.indent-1{
  margin-left: 20px;
}
.indent-2{
  margin-left: 40px;
}</style>
<ul>
<li class='indent-1'> text1 </li>
<li class='indent-2'> text2 </li>
</ul>
"

The requirement is to render the text as it was an HTML: two bullets where the first one has one indent (20px) and the second one has two indents (40px). Currently, I use DOMSanitizer and it works:

  <div
    [innerHTML]="this.sanitizer.bypassSecurityTrustHtml(data)"
data"
  ></div>

However, I am trying to avoid using bypassSecurityTrustHtml by:

        const rawValue = data.split('</style>');
        if (rawValue.length === 2) {
          const style = rawValue[0] + '</style>';
          const html = rawValue[1];
          let sanitizedHTML = this.sanitizer.sanitize(
            SecurityContext.HTML,
            html
          );
          const sanitizedStyle = this.sanitizer.sanitize(
            SecurityContext.STYLE,
            style
          );
          console.log('AhmadMansouri', sanitizedHTML);
          console.log('AhmadMansouri', sanitizedStyle);
          sanitizedHTML = sanitizedHTML.split('&#10;').join('\n');//this line can be removed
          result = sanitizedStyle + '\n' + sanitizedHTML;
        }

If I use it here it does not work (the style would not be applied):

  <div
    [innerHTML]="data"
  ></div>

How can I resolve this issue?