Search code examples
htmlangularfont-awesomeng-class

font awesome behavior with ng class

So my code is in angular version 5.

I have a button with an icon. I am trying to make the icon dynamic. So i want to shift between send icon fa fa-paper-plane and loading iconfa fa-spinner fa-spin. 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.

Case 1) I gave fa along with fa-spinner and fa-paper-plane which didn't work. 

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': true, 'fa fa-paper-plane': false }" aria-hidden="true" title="send"></i>
  </button>
</div>

So this is the output below, where I get a square icon instead of the spinner.

a square box appears

Case 2) In this as well, I have given fa along with fa-spinner fa-spin and fa-paper-plane

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': false, 'fa fa-paper-plane': true }" aria-hidden="true" title="send"></i>
  </button>
</div>

So now this happens.

fa paper plane works

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,

Case 3) I have again given fa with fa-spinner and fa-paper-plane. But i have interchanged the position of fa-spinner and fa-paper-plane as you can see below.

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-paper-plane': true, 'fa fa-spinner fa-spin': false }" aria-hidden="true" title="send"></i>
  </button>
</div>

But this was the output, where I am again getting a box instead of paper-plane this time ( which I thought was working fine).

fa-paper-plane not working

Case 4) so now, below, you can see I have interchanged the true false values.

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-paper-plane': false, 'fa fa-spinner fa-spin': true }" aria-hidden="true" title="send"></i>
  </button>
</div>

And well, this gave me this output.

got spinner finally

Tada. Spinner is working too.

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 Second Position in the [ngClass] directive.

Can someone please help me with a fix?

PS: Yes I am not using true and false ( I have a flag variable for it)

Solution

  • It seems to work best when the object's key is a single class.

    You can instead do something like this:

    class="fa" [ngClass]="{'fa-paper-plane': true, 'fa-spinner': false, 'fa-spin': false }"

    Because the fa class should always apply, it's being done in a normal class attribute