当我们点击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

Answer 1

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