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

user_15060880 0
Viewed 130

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?

angular
1 Answers

.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>
user_57081170
Related