ngClass doesn't work Angular 5

Question

Hello I am user angular 5 and I want to toggle change a Play <-> Pause icon for my soundcloud player.

here is my TypeScript followed by my html.

I can see in my console that I toggle correctly the playMode but the font awesome icon doesn't change as it is suppose to do.

Thanks for the help.

import { Ng2DeviceService } from 'ng2-device-detector';
import { Component, OnInit } from '@angular/core';
import { NgClass } from '@angular/common';
import './soundcloud-script.js';

@Component({
  selector: 'app-sc-player',
  templateUrl: './sc-player.component.html',
  styleUrls: ['./sc-player.component.css']
})
export class ScPlayerComponent{
  playMode: boolean;

  constructor(private deviceService: Ng2DeviceService) 
  {
    this.playMode = true;
  }

toggleIcon(){
  this.playMode = !this.playMode;
  console.log(this.playMode);
}

}

          <span id="play" 
          (click)="toggleIcon()">
          <i [ngClass]="{'fas fa-pause positionPlay': !playMode, 'fas fa-play positionPlay': playMode}"></i>
          </span>

Answer 1

Take out common expression in class and put conditional expression in ngClass directive

<i class="fa positionPlay" 
  [ngClass]="{'fa-pause': !playMode, 'fa-play': playMode}"
></i>

check here Deep explanation about how ngClass works? and why you should take out common classes out.

Also fas should be fa class, if you're using font-awesome icon class.

Answer 2

I've just run into the same problem working with fontawesome5 in angular5. The problem is that whenever the fontawesome compiler find a tag with a class="fa... something" it substitute it with a svg...something tag, so you can no more reference to the initial tag and change its class.

I found a solution for the problem that is pretty horrible but it works. So, since You cannot change the class of the initial element I just recreated the element from zero and deleted from the dom the previous one using ngFor directive like that:

export class FavoriteComponent implements OnInit {

  isFavorite: boolean;
  classes: string[]

  constructor() { }

  ngOnInit() {
    this.isFavorite = false;
    this.classes = ['far fa-star'];
  }

  onClick(){
    this.isFavorite = !this.isFavorite;
    this.classes = this.isFavorite ? ['fas fa-star'] : ['far fa-star'];
  }
}

<div (click)="onClick()" *ngFor="let class of classes">
  <i class={{class}}></i>
</div>

I've started developing no more than a month ago so the code is not the cleanest but I think it will work for You.