Настроить только нажатую кнопку

Question

Я разработал две колонки, обе с несколькими кнопками. Цель состоит в том, чтобы щелкнуть каждую кнопку, изменить цвет фона и цвет шрифта этой кнопки.

На раннем этапе все кнопки находятся в их естественном состоянии. Нажимая кнопку в левом столбце (A, B, C), я хочу, чтобы только эта кнопка изменяла цвет фона и цвет шрифта, то же самое с кнопками в правом столбце.

Is есть также способ, при котором всякий раз, когда вы нажимаете кнопку в левом столбце, если в правом столбце какая-либо кнопка имеет цвет фона (уже была нажата), она вернется в исходное состояние?

Я пытался используйте jquery и работайте с идентификаторами и классами, но это кажется не самым правильным способом.

Кто-нибудь может мне помочь?

DEMO

HTML

<div class="row">
    <div class="col">
        <div *ngFor="let item of Groups">
            <button (click)="Change(0,item)" class="btnGrup">{{item.name}}</button>
        </div>
    </div>
    <div class="col">
        <div *ngFor="let item of Words">
            <button (click)="Change(1,item)" class="btn2">{{item.name}}</button>
        </div>
    </div>
</div>

TS

 Change(index, data) {
    let self = this;
    switch (index) {
      case 0:
        // $(".btnGrup").css({ "background-color": "#f7f7f9", "color": "#BCBCCB" });
        // $(".btnGrup").css({ "background-color": "rgba(73, 129, 194, 0.1)", "color": "rgba(73, 129, 194, 1)" });
        break;
      case 1:
        //      $(".btn2").css({ "background-color": "#f7f7f9", "color": "#BCBCCB" });
        // $(".btn2").css({ "background-color": "rgba(73, 129, 194, 0.1)", "color": "rgba(73, 129, 194, 1)" });
        break;
    }
  }

Answer 1

просто добавьте новое свойство в свою группу, например, назовите его «проверка»

Groups=[{
  id:1,
  name:"A",
  check:false
},
{
  id:2,
  name:"B",
  check:false
},
...
]

Создайте два класса

.class1
  {
     background-color: #f7f7f9;
   color: #BCBCCB 
   }
.class2
{
  background-color: rgba(73, 129, 194, 0.1);
  color: rgba(73, 129, 194, 1)
}

И используйте ngClass

<button (click)="item.check=!item.check" 
         class="btnGrup"
         [ngClass]="{'class1':item.check,'class2':!item.check}"
       >{{item.name}}</button>

Если вам нужна только одна кнопка, вам не нужно добавлять новое свойство в свои «группы», нужны только две переменные

buttonSelect1=-1
buttonSelect2=-1

И используйте

<div *ngFor="let item of Groups;let i=index">
            <button (click)="buttonSelect1=i" 
               class="btnGrup"
               [ngClass]="{'class1':buttonSelect1==i,'class2':buttonSelect1!=i}"
             >{{item.name}}</button>
</div>