In Component TS:
url = "https://www.urbanpro.com/kolkata/self-and-beyond-golf-green/4422880";
In Component HTML:
<iframe
[src]="url | safe: 'resourceUrl'"
height="600"
width="1000"
></iframe>
Now create a safe pipe:
import { Pipe, PipeTransform } from "@angular/core";
import {
DomSanitizer,
SafeHtml,
SafeStyle,
SafeScript,
SafeUrl,
SafeResourceUrl,
} from "@angular/platform-browser";
@Pipe({
name: "safe",
})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(
value: any,
type: string
): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
console.log(type);
switch (type) {
case "html":
return this.sanitizer.bypassSecurityTrustHtml(value);
case "style":
return this.sanitizer.bypassSecurityTrustStyle(value);
case "script":
return this.sanitizer.bypassSecurityTrustScript(value);
case "url":
return this.sanitizer.bypassSecurityTrustUrl(value);
case "resourceUrl":
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default:
throw new Error(`Invalid safe type specified: ${type}`);
}
}
}