how to use innerHTML when the string is an Iframe tag in angular

Question

There is a string type variable, which contains an iframe tag. I need angular to identify the string as an iframe HTML tag and populate the HTML.

Currently, angular is constructing its has string.

Please check the below code

Variable:

this.longDesc = "<iframe width="something" height="something" src="something" ></iframe>"

html file

<div class="description-panel" [innerHTML]="longDesc" ></div>

lpradhap · Accepted Answer · 2017-09-14 08:52:37Z

4

Step1 : Import the below part in ts file

import {DomSanitizer} from '@angular/platform-browser';

Step 2 :Define constructor in perticular ts file

constructor(private domSanitizer:DomSanitizer) {}

Step 3:-Use below code in ts file according to requirement (method/ function or constructor)

this._EmittersService.longDescemitted$.subscribe(obj => {
      this.longDesc = this.domSanitizer.bypassSecurityTrustHtml(obj or any html content);
or 
this.longDesc = this.domSanitizer.bypassSecurityTrustHtml('<iframe width="something" height="something" src="something" ></iframe>')
     });

edited Sep 14, 2017 at 8:52

lpradhap

6546 silver badges18 bronze badges

answered Sep 12, 2017 at 9:47

Anup pandey

4372 silver badges9 bronze badges

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

1 Comment

lpradhap Over a year ago

works, thanks. but I dont belive we need to import "SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl" is required to be imported.

Collectives™ on Stack Overflow

how to use innerHTML when the string is an Iframe tag in angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related