Как добавить класс элементу при нажатии Angular 5?

Question

[alehandroWEB]

Есть список:

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

Как добавить класс "active" элементу li по которому кликнули мышкой?

Answer 1

[Ivan Stroykin]

Можно вот так - пример

Comments

[alehandroWEB]

Хотя это не совсем то, нужно чтоб активные айтемы были независимы друг от друга. То есть могли быть активными одновременно два, или три айтема. И по нажатию на активный айтем класс "active" удалялся.

[Ivan Stroykin]

alehandroWEB, Пример. Естественно можно доработать

[alehandroWEB]

Спасибо, понял суть. На jquery это одной строчкой кода решается, неужели создатели ангуляра не могли придумать какой-то удобный инструмент для манипуляций с классами и стилями элементов? Для элементарных задач приходится городить велосипеды)

[Ivan Stroykin]

alehandroWEB, потому что jQuery - это библиотека, а Angular - фреймворк )
Но можно и легче написать, это просто пример

[alehandroWEB]

Объединить бы их, вот это была бы мощь)

[Ivan Stroykin]

alehandroWEB, нееее, это сделать легко, но не нужно этого делать)

Answer 2

[Владимир]

https://angular.io/api/common/NgClass

Comments

[alehandroWEB]

как именно при клике поменять класс через NgClass?

<ul>
<li *ngFor="let item of items" (click)=[ngClass]="'active'"><li>
</ul>

так конечно не работает, подскажите пожалуйста сам синтаксис. В jquery это всё через $(this) решалось, как тут на нужном элементе менять класс не могу понять...

[Владимир]

alehandroWEB, ангуляр это не UI библиотека, это MWWM фреймворк. Пройдите туториал официальный на сайте.