Style binding not updating on FontAwesome spinner icon in Angular 4

Question

This seems like a silly problem, but after investigating and doing all kinds of tests, I don't understand why this happens.

I have a Send button that should show a spinner while sending, and then go back to not showing it.

<button (click)="sendCSV()" class="btn btn-primary btn-sm"><i class="fas fa-spinner fa-spin" [style.visibility] = "sendingEmails ? 'visible' : 'hidden'"></i>   Send</button>
{{sendingEmails}}

I added {{sendingEmails}} below the button to verify that the variable is changing properly, and it is. In my component, I have a sendingEmails var that is originally false, and:

sendCSV() {

        this.sendingEmails = true;
        this.eventsService.sendGuestlistByEmail(this.eventId).subscribe(
            res => {
                this.sendingEmails = false;
                console.log(res);
            }, 
            err => {
                this.sendingEmails = false;
                console.log("Error.");
            }
        );
    }

The problem is that when I click send, the data binding will update properly (false-true-false), but the styles stay as if I had never clicked.

In case it matters, I'm using Font Awesome 5 for the spinner.

I also tried

<i class="fas fa-spinner fa-spin" *ngIf="sendingEmails"></i>

This will lead to the spinner multiplicating every time I send the emails, and never actually disappearing after the first time.

Any idea why this could be?

It actually works for me... which suggests that the error is probably not here but somewhere around this code. Is there any errors in the console, maybe even before to the call? Could you add the code of `sendGuestlistByEmail()` service? — Alexander Leonov, Apr 23 '18 at 23:25
Do you see the spinner if you set [style.visibility]="'visible'" in the markup? Or if you don't set that style attribute at all? — ConnorsFan, Apr 24 '18 at 02:07
I note you have `class="fas fa-spinner fa-spin` but it should be `class="fa fa-spinner fa-spin`. — Richard Matsen, Apr 24 '18 at 02:48
Thank you @AlexanderLeonov, you made me suspect my HTML instead of my Angular knowledge. — Victoria Ruiz, Apr 24 '18 at 18:40
@RichardMatsen, fas is actually a new class in FontAwesome 5, for the solid icons (there are regular and light versions now too). — Victoria Ruiz, Apr 24 '18 at 18:41
My apologies. So using FontAwesome 5 and fas in my Stackblitz, I no longer see the spinner (whereas it worked fine with FontAwesome 4.7 and fa). — Richard Matsen, Apr 24 '18 at 19:24
I don't know if [this question](https://stackoverflow.com/questions/48027322/font-awesome-5-with-angular) matches your problem. There seems to have been a problem with FontAwesome v5 three months ago, and an upgrade adapter to handle it [angular-fontawesome](https://github.com/FortAwesome/angular-fontawesome) — Richard Matsen, Apr 24 '18 at 19:38

Victoria Ruiz · Accepted Answer · 2021-01-12T15:14:09.603

Thank you all for your input and suggestions.

It turns out that the problem was not Angular, but FontAwesome. I recently upgraded to FontAwesome 5, which works with SVGs, instead of CSS. So, FontAwesome was turning my <i> into an SVG, and therefore, not updating properly.

It was a very silly problem, but it might come up for people who were used to the old FontAwesome, so I wanted to leave my "solution".

It's as simple as doing:

<span [style.visibility] = "sendingEmails ? 'visible' : 'hidden'">
    <i class="fas fa-spinner fa-spin"></i>
</span>

Fateh Mohamed · Answer 2 · 2018-04-23T23:32:38.893

1

try to use ChangeDetectorRef.detectChanges() to run change detection on the component

  constructor(private changeD: ChangeDetectorRef) {}

  sendCSV() {
   this.sendingEmails = true;
    this.eventsService.sendGuestlistByEmail(this.eventId).subscribe(
        res => {
            this.sendingEmails = false;
            this.changeD.detectChanges();
            console.log(res);
        }, 
        err => {
            this.sendingEmails = false;
            console.log("Error.");
        }
    );
  }

edited Apr 23 '18 at 23:32

answered Apr 23 '18 at 23:21

Fateh Mohamed

20,445
5
43
52

After playing with it on StackBlitz, it looks like change detection isn't needed - unless you have OnPush set, but then the interpolation `{{sendingEmails}}` also does not change (and you already said it does change). – Richard Matsen Apr 24 '18 at 02:45
One thing to test is if font-awesome is installed correctly. – Richard Matsen Apr 24 '18 at 02:45

Style binding not updating on FontAwesome spinner icon in Angular 4

2 Answers2