Angular2 element with flickering ngIf

Question

Background

I am creating a credit card form component. The component checks which type of credit card has been entered and displays a symbol / icon for the type of card. The symbol is an external SVG that loads once the type of credit card has been identified.

Problem

The cc symbol flickers, as you can see in the image below. A look in the Chrome DOM inspector shows me that something is happening with the element with *ngIf applied to it, the element is somehow updated (without any attribute changes), which seems to cause flickering.

code

Below is the code for the part of my template containing the flickering part. I checked the component and the variable used in ngIf is not updated, except when it allows (when the credit card number changes to one type).

 <div class="credit-card-icon" *ngIf="creditCardType != null"> <object type="image/svg+xml" [data]="getTypeIconUrl()"></object> </div> 

What could be causing this problem and how can I solve it?

UPDATE

It turns out that this is actually caused by the [data] attribute, and not something related to ngIf . Sorry to blame you, ngIf.

Answer 1

After writing this post, I wondered why he would try to update the DOM object element all the time. Turns out the solution was pretty obvious. Since the problem did not occur with the static attribute data , but only with the dynamically linked attribute [data] , I assumed that this has something to do with the equality of the object.

In my component, I use the bypassSecurityTrustResourceUrl(url) DomSanitizer to "approve" the URL of the icon.

However, the following statement is always incorrect:

 bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url) 

By caching SafeResourceUrl returned from bypassSecurityTrustResourceUrl(url) , this problem has been fixed!