как в ангуляр директиве сделать проверку на наличие класса

Question

у меня есть директива в которой я к элементу при клике добавляю класс selected и также при повторном клике убираю класс.

@HostBinding('class.selected') isSelect = false
@HostListener('click')
  toggleAddClass() {
this.isSelect = !this.isSelect
}

Но я хочу чтобы у меня класс selected добавлялся только к одному элементу, и при клике на другой элемент, класс из старого удалялся, и добавлялся к новому
Сейчас это выглядит так

код из html

<div
  #leftChild
  class="left"
  [hidden]="dateLoaded">
  <button
    select //директива которая додает класс
    [disabled]="disabledForLeft"
    *ngFor="let left of left"
    class="left__data"
    (click)="kim(left)">
    {{left?.coin_name}}
  </button>
</div>

Answer 1

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

Для упрощения конструкции стоит обратить внимание на *ngFor, а также сопоставление активного элемента и индекса в массиве.

export class AppComponent {
  activeIndex = 0;
  array = ['coin1', 'coin2', 'coin3', 'coin4', 'coin5', 'coin6'];
}

.selected {
  background-color: red;
}

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

Пример на https://stackblitz.com/edit/angular-ivy-2hunas

БЛОГ НА HUSL

как в ангуляр директиве сделать проверку на наличие класса

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