Binding to the src of an iframe causes the iframe to flicker

Binding to the src property of an iframe causes the iframe to reload every time change detection is run, even when the src value has not changed.

Reproduction: https://plnkr.co/edit/CgLHkprl4jYndqEiY7mX?p=preview (enter X1RVYt2QKQE as an example videoId, then type into the unrelated input)

Happens with all Angular versions <= 4.1 (current version at time of this writing)

Note from @tbosch:

So the problem is that this.domSanitizer.bypassSecurityTrustResourceUrl returns a new object every time it is invoked. If the result is cached, the flickering is gone, see https://plnkr.co/edit/W0gJKmRsGUpzb1QNZqf5?p=preview

Eventually, we could change our behavior in that bypassSecurityTrustResourceUrl would use an internal cache already.

[juanbenitopr]

@anupvarma @danieltorrer I have found a solution, you just have to put the email modifying the dom by your own. I attach a code sample below

component.html <iframe src="" frameborder="0" height="700" ></iframe>

component.ts

 constructor(
    private hostElement: ElementRef,
  ) { }

ngOnInit(){
 const iframe = this.hostElement.nativeElement.querySelector('iframe');
 iframe.src = this.url;
}

[danieltorrer]

Thanks @juanbenitopr For me the solution was to save the safeUrl and use it on [src] but setting it directly to the dom seems also like a great solution

<iframe [src]="video.safeURL" frameborder="0" height="700" ></iframe>

this.video.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl( url );