Как переключить класс на li после события click в angular 2 и выше

Question

У меня есть список заказов, как показано ниже. Я хочу удалить классы active и arrow-down из ранее активированного элемента li (в случае, когда я нажимаю на любой другой элемент li) и хочу добавить к нему класс со стрелкой вверх. Кроме того, я хочу добавить active и arrow-down классы к недавно нажатому элементу li. В следующем коде link 1 активирован по умолчанию.

<ul class="sibe-bar-menu">
    <li class="active arrow-down"><a href="#">1</a></li>
    <li class="arrow-up"><a href="#">2</a></li>
    <li class="arrow-up"><a href="#">3</a></li>
    <li class="arrow-up"><a href="#">4</a></li>
</ul>

Я хочу получить код, подобный приведенному ниже, один раз после нажатия на 3-й элемент li.

<ul class="sibe-bar-menu">
    <li class="arrow-up"><a href="#">1</a></li>
    <li class="arrow-up"><a href="#">2</a></li>
    <li class="active arrow-down"><a href="#">3</a></li>
    <li class="arrow-up"><a href="#">4</a></li>
</ul>

Answer 1

Для этого вы можете использовать ngClass в сочетании с clicked.

В HTML добавьте функцию click к каждому из них, чтобы выбрать ее. Также добавьте ngClass, чтобы показать соответствующие классы, если это выбранный класс.

<ul class="sibe-bar-menu">
    <li [ngClass]="clicked === 0 ? 'active arrow-down' : 'arrow-up'" (click)="select(0)"><a href="#">1</a></li>
    <li [ngClass]="clicked === 1 ? 'active arrow-down' : 'arrow-up'" (click)="select(1)"><a href="#">2</a></li>
    <li [ngClass]="clicked === 2 ? 'active arrow-down' : 'arrow-up'" (click)="select(2)"><a href="#">3</a></li>
    <li [ngClass]="clicked === 3 ? 'active arrow-down' : 'arrow-up'" (click)="select(3)"><a href="#">4</a></li>
</ul>

Наконец, в бэкэнде создайте функцию select

clicked = 0;

select(i) {
  this.clicked = i;
}

Вот демонстрация StackBlitz