Angular on icon click toggle class name or part of the class name

Question

I am using Angular 11 and in my component.html file I have an icon:

<i class="fa fa-eye" aria-hidden="true"></i>

What I need to do is to toggle the class when I click on it.

I need to toggle between:

<i class="fa fa-eye aria-hidden="true"></i>

and

<i class="fa fa-eye-slash aria-hidden="true"></i>

How can I do this?

question from:https://stackoverflow.com/questions/65848916/angular-on-icon-click-toggle-class-name-or-part-of-the-class-name

Answer 1

.ts file :

@Component
export class YourComponent extends ... {
   toggle:boolean = false; // add any public variable
}

.html file :

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