角4をIDで変更CSS

Question

バニラJSを使用して要素IDでCSSプロパティを変更しようとしていますか？

私は、次のような効果を達成しようとしています：

1. 最初のボタンが下底にクリックされた後、上部の最初のボタンはbtn-darkからbtn-warningへのクラスを変更する必要があります。
2. 残りのボタンは同じパターンに従う必要があります。＃b2をクリックすると、＃d2がbtn-darkからbtn-warningに変更されます。

私の現在の試行：

<div class="row"> 
    <button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]" 
    type="button" 
    class="btn btn-dark" 
    id="d{{number}}" 
    > 
    </button> 
</div> 

<div class="row"> 
    <button (click)="onClick($event)" 
    *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]" 
    type="button" 
    class="btn btn-secondary" 
    id="b{{number}}">{{number}} 
    </button> 
</div> 

Screenshot displaying the template

Answer 1

この

のように試してみてください、それははい時点で

stackblitz demo link

Answer 2

使用ngClass、例えば：

<button [ngClass]="{'btn-dark': true}">...</button>