How to toggle the color of multiple icons when we click on the icons in angular

Question

I have 8 icons and I have to change the color to black from white when we click on the icon(It has to be toggle).

Note: At a time only one icon should be active (change the color).

.component.ts

<div class="container">
  <i class=" icon icon-face-1"></i>
 <i class=" icon icon-face-2"></i>
  <i class=" icon icon-face-3"></i>
  <i class=" icon  icon-face-4"></i>
<i class=" icon  icon-face-5"></i>
<i class=" icon  icon-face-6"></i>
<i class=" icon  icon-face-7"></i>
<i class=" icon  icon-face-8"></i>

</div>

I have tried but not able to do Can anyone help me on this

akkonrad · Accepted Answer · 2022-02-03 11:37:23Z

2

You need to toggle the state of the icon, one way would be like on this example: https://stackblitz.com/edit/angular-font-awesome-starter-5z7mdg?file=src%2Fapp%2Fapp.component.html

answered Feb 3, 2022 at 11:37

akkonrad

1,0731 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to toggle the color of multiple icons when we click on the icons in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related