Angular active class ngFor

Question

у меня есть массив который состоит из объектов,этот массив я добавляю в HTML с помощью *ngFor и обрабатываю событие клик,чтобы при нажатии добавить активный класс.

@Directive({
  selector: '[appHome]'
})
export class HomeDirective {

  @HostBinding('class.active') isActive = false;

  @HostListener('click') onClick() {
    
    this.isActive = true;

  }
}

HTML

            <li (click)="show(idx)" class="week-li" *ngFor="let wd of weekDays;let idx = index">

                <p  class="week-title" appHome> {{wd.titleName}}</p>

            </li>
        </ul>

Все работает нормально,клик добавляет ожидаемый класс,но когда я нажимаю на второму элементу,предыдущий активный класс не удаляется,как можно это реализовать только с Angular,без Angular js

Answer 1

Если не использовать директиву, то можно сделать так:

<div *ngFor="let item of array; let index = index" (click)="activeIndex = index"
  [ngClass]="{active: activeIndex === index}">
  {{item}}
</div>

При этом index и activeIndex не обязательно объявлять в компоненте, а можно оставить их как переменные шаблона.

БЛОГ НА HUSL

Angular active class ngFor

Ответы (1 шт):