CODEWITHSUNDEEP
cssangularfont-awesomeng-class
Suroor Ahmmad
Suroor Ahmmad

Reputation: 1162

font-awesome icon doesn't show up in [ngClass] in Angular 4

I'm facing a strange error in my Angular 4 HTML Template, I'm trying to toggle the class of <i> tag, but only one class shows up, but not the other. Here is my code;

<i [ngClass]="{'fa fa-eye': visible, 'fa fa-eye-slash': !visible}" aria-hidden="true" (click) = "toggle(pass)"></i>

TS:

visible = false;
toggle(event){
    this.visible = !this.visible;
}

When i check my app, the first icon shows up i.e. the default on fa fa-eye-slash but when i click on it it shows only box.

HTML: enter image description here

Edit:

Tried with different icons from FA, but nothing shows up.

Upvotes: 1

Views: 3336

Answers (1)

peinearydevelopment
peinearydevelopment

Reputation: 11474

You need to change the html to:

<i class="fa" [ngClass]="{'fa-eye': visible, 'fa-eye-slash': !visible}" aria-hidden="true" (click) = "toggle(pass)"></i>

Upvotes: 9

Related Questions