How to make it so that when a link is clicked, the active class is added to it, while it is removed from others?

Question

Angular

There is a list of links:

<a class="active" hrref="#">Href 1</a>
<a hrref="#">Href 2</a>
<a hrref="#">Href 3</a>

How to make it so that when you click on any of these links, the active class is added to it, and it is removed from others?

Answer 1

for the first angular if ui-router is used then

<a  ui-sref-active="active" ui-sref="user.about">Информация</a>

for the second

<a routerLink="earning" routerLinkActive="active">заработок</a>