CODEWITHSUNDEEP
angularfont-awesomeng-classangular-template
Christophe Chenel
Christophe Chenel

Reputation: 1921

ngClass doesn't work Angular 5

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>

Upvotes: 2

Views: 9397

Answers (5)

Jeremy Ciesla
Jeremy Ciesla

Reputation: 21

Sorry, not enough reputation to reply to your updated answer showing your solution. For what it's worth, you can have your cake and eat it too. You don't need to downgrade from FA5 to FA4.7. If you replace that script tag that you replaced with the link to 4.7 css with the following, it has the same effect but allows you access to FA5 icons:

<link href="//use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

Upvotes: -1

Stefano Petronio
Stefano Petronio

Reputation: 41

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.

Upvotes: 4

Christophe Chenel
Christophe Chenel

Reputation: 1921

Thanks to Santosh Singh and Pankaj Parkar for your help! Your answer helped me to find the final answer.

Here it is.

I changed this line in my index.html :

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

By the line proposed in the Santosh Singh's Plunker:

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Of course, I changed the class "fas" by "fa" to make it works properly with the font-awesome 4.7.0 version. Like Parkar said:

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

Perhaps I didn't import the right v5 reference from font-awesome at the beginning. Nvm, it works fine now.

Thanks you all!

Upvotes: 2

santosh singh
santosh singh

Reputation: 28662

Place common class outside ngClass. check out following working plnkr for demo

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

DEMO

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

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.

Upvotes: 6

Related Questions