Load html file into iframe in angular

Question

Hi i am trying to load html file into iframe, but it is not working, If i load any external url it is working

in Component.ts

name = 'Set iframe source';
  url: string = "./add-cardIframe.component.html";
  urlSafe: SafeResourceUrl;

in oninit
ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

HTML File:

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

getting error as Cannot match any routes. URL Segment: 'add-cardIframe.component.html' any help on this issue would be great

Kuzenko Lubko · Accepted Answer · 2020-07-10 09:02:22Z

1

Html:

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

TypeScript:

this.html = this.sanitizer.bypassSecurityTrustHtml(
      '<iframe width="100%" height="800" src="https://primefaces.org/primeng/#/"></iframe>',
    );

answered Jul 10, 2020 at 9:02

Kuzenko Lubko

2,1191 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John White Over a year ago

It bleeds inline styles to the whole application, they don't stay inside the iframe

Collectives™ on Stack Overflow

Load html file into iframe in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related