Как сделать активным элемент по нажатию на него?

Question

[zachfischer]

Есть вот такой список:

<div class="list-group" >
  <div class="media" *ngFor="let user of users">
    <a class="list-group-item active" >
      <h4 class=" media-heading list-group-item-heading"> {{user.name}} </h4>
      <div class="row">
        <div class="col-md-12">
          <p class="list-group-item-text">{{user.position}}</p>     
        </div>
       </div>      
     </a>
   </div>
</div>

Когда я использую вот такой класс list-group-item active, то весь список становится активным, а как сделать так, чтобы активным элементом в списке становился только тот, который выбран?

$('.list-group').find('.list-group-item').on('click', function () {
      if ($(this).hasClass('active')) {
          return;
      }
      $('.list-group').find('.list-group-item active').removeClass('active');
      $(this).addClass('active');
 });

Comments

[alvvi]

Написать JS код который будет делать то что вы говорите.

[zachfischer]

Илья Ростопка, сделал, не работает

[AlexaZem]

ого, использование JQuery в Angular, еще и такого рода контроллер - это просто комбо)
кто это вам так насоветовал?

Answer 1

[0xD34F]

Вам тут не нужен jquery, если уже используете angular. Добавляете в компонент свойство, которое будет содержать ссылку на выбранный объект и устанавливаете его значение по клику. Добавляете элементам класс, если выбранный объект совпадает с текущим:

<div
  *ngFor="let user of users"
  [class]="active === user ? 'active' : ''"
  (click)="active = user"
>

например