Angular 6 Iframe Binding

There is a variable that stores iframe code. I want to bind this in a div, but nothing work. html:

ts: yt = '

Solution 1:

You probably might get a warning saying that it's unsafe HTML. That's why Angular is not rendering it inside the div.

You'll have to DomSanitize it:

<divclass="top-image" [innerHTML]="yt | safe: 'html'"></div>

Here's the pipe courtesy Swarna Kishore.

import { Pipe, PipeTransform } from'@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from'@angular/platform-browser';

@Pipe({
  name: 'safe'
})
exportclassSafePipeimplementsPipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  publictransform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case'html':
        returnthis.sanitizer.bypassSecurityTrustHtml(value);
      case'style':
        returnthis.sanitizer.bypassSecurityTrustStyle(value);
      case'script':
        returnthis.sanitizer.bypassSecurityTrustScript(value);
      case'url':
        returnthis.sanitizer.bypassSecurityTrustUrl(value);
      case'resourceUrl':
        returnthis.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        thrownewError(`Invalid safe type specified: ${type}`);
    }
  }
}

Here's a Sample StackBlitz.

Share