Render vanilla JS <script> from API Response NOT working in the Angular 16

Question

Let's consider that I am getting a response (as below) from api

Response

{
  embedEmail: "\n<div style='text-align:left'>\n  <input \n    type=\"email\" \n    id=\"textboxID_4204617a-0b6b-4676-880c-be963ee6ce74\" \n    data-expression='9'\n  >\n  </input>\n  <small style=\"display: block; margin-top: 0.5rem; margin-bottom: 0.5rem; color: crimson\" \n  id=\"textBoxemailHelpId\">\n  </small>\n</div><br/>\n<script>\nconst textBoxHtmlInputElement_4204617a_0b6b_4676_880c_be963ee6ce74_email = this.document.getElementById('textboxID_4204617a-0b6b-4676-880c-be963ee6ce74');\nconsole.log('textBoxHtmlInputElement_4204617a_0b6b_4676_880c_be963ee6ce74_email:', textBoxHtmlInputElement_4204617a_0b6b_4676_880c_be963ee6ce74_email)\n</script>\n"
}

I am able to render the HTML content present in the embedEmail with the help of a pipe which usesDomSanitizer.bypassSecurityTrustHtml().

But the challenge I am facing here is, the content inside the <script></script> tags is not rendered.

How to overcome this behavior so that I could render the script?

Some background information on what I am trying to achieve with the above stuff:

I am having an application where one end-user (using angular) saves the Input fields & it's respective validations as a string (i.e., stringified some HTML with some inline CSS and JS) in the DB.

This saved content string needs to be retrieved back as normal HTML for another end-user (using .NET) with all the CSS and JS applied properly.

Any other suggestions appreciated, but request you to address the above query too...