title: Angular2 item with ngIf flickers
body: <p><strong>Background</strong></p>
  
  <p>I am creating a credit card form component. The component checks which credit card type has been entered, and shows a symbol/icon of the card type. The symbol is an external SVG that loads as soon as the credit card type has been identified.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>The cc-symbol flickers, as you can see in the image below. A look in the Chrome DOM inspector shows me that something is going on with the element with the <code>*ngIf</code> applied to it, the element is being updated somehow (without any attributes changing) which seems to cause the flickering.</p>
  
  <p><a href="https://i.stack.imgur.com/A3hnO.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/A3hnO.gif" alt="Angular2 ngIf flickering"></a></p>
  
  <p><strong>Code</strong></p>
  
  <p>Below is the code for the part of my template that contains the flickering part. I've checked the component and the variable used in <code>ngIf</code> isn't updated except when it's suppose to (when the credit card number is change to a one of different type).</p>
  
  <pre><code>&lt;div class="credit-card-icon" *ngIf="creditCardType != null"&gt;
      &lt;object type="image/svg+xml" [data]="getTypeIconUrl()"&gt;&lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>What could be causing this issue, and how would I resolve it?</em></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It turns out that this is actually caused by the <code>[data]</code> attribute rather than having anything to do with <code>ngIf</code>. Sorry for blaming you, ngIf.</p>