Disclaimer: I read a lot of stuff regarding parsing and bypassing of [innerHTML] in Angular. Found few solutions which includes creating a pipeline and bypass the URL or HTML etc.

Still not able to find out a good solution.

Problem: While providing my HTML to DOMParser() or setting directly the HTML, it parses it (by default) which leads to inappropriate/unwanted results.

I have HTML which contains this line.

<table border="0" cellpadding="0" cellspacing="0" style="text-align:left;font-size: 15px;" width="100%"> <tbody>${shipmentData.order_items.map((items, i)=>{return ` <tr>...</tr>`})}

While passing this to DOMParser or innerHTML it gets converted into below code

${shipmentData.order_items.map((items, i)=&gt;{return ` `}).join('')}<table style="text-align:left;font-size: 15px;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr>

I tried many solutions as stated above in disclaimer and also tried setting things using replaceChildren() or append() etc., but none gets the output I want.

Is there any way around to set HTML without parsing to any element?