3

I am trying to set the IFrame Source Input with a component below.

Its not working for some reason, showing no wepages. How can I set the input source properly?

Calling Method:

<app-viewer-iframe-two
    [url1]="'http://www.food.com'"
    [url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>

Typescript:

export class ViewerIframeTwoComponent implements OnInit {

  constructor() { }

  @Input() url1: string;
  @Input() url2: string;
  
  ngOnInit(): void {
  }
}

HTML:

<div class="box">
  <iframe class="iframe-one" src="{{url1}}" frameborder="0"
    scrolling="yes" align="left"> </iframe>
</div>

<div class="box">
  <iframe class="iframe-two" src="{{url1}}" frameborder="0"
    scrolling="yes" align="right"></iframe>
</div>

Error:

No source ever gets set,

enter image description here

Resource: this is only for Angular 1

How to set an iframe src attribute from a variable in AngularJS

1 Answers1

5

Yes, it is still non-secure to put whatever into url same as in Angular.js. Just bypass it - it will be still non-secure, but you will take responsibility instead of angular developers.

  constructor(public sanitizer: DomSanitizer) { }

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

write as [src]="urlSafe"

https://angular.io/api/platform-browser/DomSanitizer

itspers
  • 797
  • 1
  • 4
  • 13
  • did I set my inputs, and quotes, and brackets correctly? –  Aug 13 '20 at 21:57
  • It doesnt matter while you try to put random string into src - angular will not allow it. bypassSecurityTrustResourceUrl returns SafeResourceUrl, not string, so dont interpolate it,but put like [src]="urlSafe" – itspers Aug 13 '20 at 22:00