title: font awesome behavior with ng class
body: <p>So my code is in angular version 5.</p>
  
  <p>I have a button with an icon. I am trying to make the icon dynamic. 
  So i want to shift between send icon <code>fa fa-paper-plane</code> and loading icon<code>fa fa-spinner fa-spin</code>. As and when I send a message I should show the spinner and when I get a message back, I should show the paper-plane icon.</p>
  
  <p>Case 1) I gave <code>fa</code> along with <code>fa-spinner</code> and <code>fa-paper-plane</code> which didn't work. </p>
  
  <pre><code>&lt;div class="send"&gt;
    &lt;button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()"&gt;
      &lt;i [ngClass]="{ 'fa fa-spinner fa-spin': true, 'fa fa-paper-plane': false }" aria-hidden="true" title="send"&gt;&lt;/i&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So this is the output below, where I get a square icon instead of the spinner. </p>
  
  <p><a href="https://i.stack.imgur.com/CAMKj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CAMKj.png" alt="a square box appears"></a></p>
  
  <p>Case 2) In this as well, I have given <code>fa</code> along with <code>fa-spinner fa-spin</code> and <code>fa-paper-plane</code></p>
  
  <pre><code>&lt;div class="send"&gt;
    &lt;button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()"&gt;
      &lt;i [ngClass]="{ 'fa fa-spinner fa-spin': false, 'fa fa-paper-plane': true }" aria-hidden="true" title="send"&gt;&lt;/i&gt;
    &lt;/button&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>So now this happens.</p>
  
  <p><a href="https://i.stack.imgur.com/vlhDy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vlhDy.png" alt="fa paper plane works"></a></p>
  
  <p>So now you can see, between the two cases, I have just interchanged true false value. So I came to a conclusion that, my spinner is not working. 
  But this happened, </p>
  
  <p>Case 3) I have again given <code>fa</code> with <code>fa-spinner</code> and <code>fa-paper-plane</code>. But i have interchanged the position of <code>fa-spinner</code> and <code>fa-paper-plane</code> as you can see below.</p>
  
  <pre><code>&lt;div class="send"&gt;
    &lt;button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()"&gt;
      &lt;i [ngClass]="{ 'fa fa-paper-plane': true, 'fa fa-spinner fa-spin': false }" aria-hidden="true" title="send"&gt;&lt;/i&gt;
    &lt;/button&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>But this was the output, where I am again getting a box instead of paper-plane this time ( which I thought was working fine).</p>
  
  <p><a href="https://i.stack.imgur.com/nXRLE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXRLE.png" alt="fa-paper-plane not working"></a></p>
  
  <p>Case 4) so now, below, you can see I have interchanged the true false values.</p>
  
  <pre><code>&lt;div class="send"&gt;
    &lt;button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()"&gt;
      &lt;i [ngClass]="{ 'fa fa-paper-plane': false, 'fa fa-spinner fa-spin': true }" aria-hidden="true" title="send"&gt;&lt;/i&gt;
    &lt;/button&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And well, this gave me this output.</p>
  
  <p><a href="https://i.stack.imgur.com/C7T6r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C7T6r.png" alt="got spinner finally"></a></p>
  
  <p>Tada. Spinner is working too.</p>
  
  <p>You can see from the four conditions, it is pretty clear that spinner as well as paper-plane is working properly, if it is placed in the <strong>Second Position</strong> in the [ngClass] directive.</p>
  
  <p>Can someone please help me with a fix?</p>
  
  <p>PS: Yes I am not using true and false ( I have a flag variable for it)</p>