Angular: Prevent DomSanizer from updating on DOM Events

Question

I'm facing an issue with DomSanitizer.

I've created a StackBlitz that replicate this issue.

Every time the button is clicked, the iframe A is reloaded. The button does absolutely nothing - so it is not related to the iframe.

iframe A has a dynamic reference to its source. To make this work I use the DomSanitizer.

iframe B has a static reference and no reload here - whats I expected. Just to show it is related to the sanitizer.

So I need to have an iframe in my application and its content should depend on the status of the application(some input). If that changes then a reload would be ok.

But I can not accept a reload by every button-click that has no connection to the iframe.

How can I handle that? Thanks for the support!

Avail

Answer 1

The Problem:

The problem is caused because you've used a method in the data-binding syntax, here:

<iframe 
  [src]="getURL()" 
  width="100%" 
  height="100px">
</iframe>

Because of this, every time Angular performs Change Detection, the getURL will get called.

The solution:

You can create a Pipe to sanitize the iframe src url. I've done something similar in this answer.

That way, your iframe won't reload every time Angular performs Change Detection.

Here's a Working Sample StackBlitz for your ref.

Spotweld