Как добавить класс css при клике только к нажатым кнопкам

Question

Мне было интересно, как добавить css класс к только одной кнопке при нажатии с помощью Angular. Прямо сейчас, когда я нажимаю любую из кнопок, класс добавляется ко всем кнопкам.

Я хочу добавить класс css к каждой нажатой кнопке.

Я мог бы сделать это делается путем создания нескольких различных css классов для каждой кнопки, а затем при нажатии кнопки добавляется только указанный c класс для этой кнопки, но есть ли лучший способ сделать это?

Любая помощь будет признателен, спасибо.

// btns.component. html

 <div class="btn-container">
    <div class="btn-col1">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/home-icon.png" alt=""><strong>Home</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/life-icon.png" alt=""><strong>Life</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()"[ngClass]="btnStatus ? 'active' : 'inactive'"><img src="../../assets/images/button-icons/car-icon.png"
          alt=""><strong>Auto</strong></button>
    </div>
    <div class="btn-col2">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/condo-icon.png" alt=""><strong>Condo</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/flood-icon.png" alt=""><strong>Flood</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/umbrella-icon.png" alt=""><strong>Umbrella</strong></button>
    </div>
  </div>

// btns.component.ts

  btnStatus: boolean = false;

  wasClicked() {
    this.btnStatus = !this.btnStatus;
    console.log(this.btnStatus);
  }

// btns. компонент. css

  .active {
    border: 4px solid $primary-color;
  }

  .inactive{
    border: none;
  }

Answer 1

допустим, вы хотите кнопку 3 на app.component. html и хотите изменить кнопку css при нажатии на любую.

app.component. html

<app-btn [url]="item.url" *ngFor="let item in [{url:'assets/images/button-icons/home-icon.png'},{url:'/assets/images/button-icons/life-icon.png'},{url:'assets/images/button-icons/car-icon.png'}]"></app-btn>

[1,2,3] для 3 кнопки может быть любой длины согласно требованию (написано это было для упрощения вещей). Вы можете передать свой URL в качестве ввода, как показано выше

создать новый компонент, скажем, btn

btn.component. html

<button [src]="url" (click)="clicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"></button>

btn.component.ts

@Input() url; 
clicked() {
          this.btnStatus = this.!btnStatus
      }

Надеюсь, это помогло, возможно, было несколько незначительных синтаксических ошибок.

Answer 2

Я думаю, что ваша проблема в том, что вы используете одно свойство, btnStatus, для всех кнопок, поэтому у вас возникает эта проблема. Вам нужно значение для каждой кнопки. Вы можете сделать что-то вроде этого.

btns.component.ts

const btnPropsCol1 = [
    { status: false, src: '../../assets/images/button-icons/home-icon.png', label: 'Home'},
    { status: false, src: '../../assets/images/button-icons/life-icon.png', label: 'Life'},
    { status: false, src: '../../assets/images/button-icons/car-icon.png', label: 'Auto'}
]

wasClicked(i: number) {
    this.btnProps[i].status = !this.btnProps[i].status;
    console.log(this.btnProps[i].status);
}

btns.component. html

<div class="btn-col1">
    <button *ngFor="let btn of btnPropsCol1; index as i;"
        class="stepOne-btns"
        (click)="wasClicked(i)"
        [ngClass]="btn.status ? 'active' : 'inactive'">
        <img src="btn.src" alt=""><strong>{{btn.label}}</strong>
    </button>
</div>

Я сделал это только для col1, вы должны повторить для другого столбца.