1

the goal is to render static html document inside an iframe

content = this.sanitizer.bypassSecurityTrustHtml(`<iframe>${x.html}</iframe>`)

<mat-dialog-content [innerHTML]="content"></mat-dialog-content>

for some reason angular does not like this because the content is injected as text after the html tag

EDIT: html content to be rendered

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol{margin:0;padding:0}table td,table th{padding:0}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c2{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:center}.c0{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c1{font-weight:700}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c0 doc-content"><p class="c2"><span>Bla </span><span class="c1">bla</span><span class="c3">&nbsp;bla</span></p></body></html>

enter image description here

1 Answer 1

2

If you need Iframe all time in HTML then you can try below approach:

content = this.sanitizer.bypassSecurityTrustHtml(x.html)

<mat-dialog-content><iframe [srcdoc]="content"></iframe></mat-dialog-content> 
Sign up to request clarification or add additional context in comments.

4 Comments

thanks for answering, indeed it works but inline css styles are ignored
Can you please share example html?
the html to be rendered is an google docs file exported as html. I updated the question with a snippet
@dsl400 I have setup codesandbox example here and its working fine for me, please check this link: codesandbox.io/s/flamboyant-resonance-4pddn0?file=/src/app/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.