Angular 4 change css von id

Question

Ich versuche, CSS-Eigenschaft nach Element-ID mit Vanille JS zu ändern?

Ich versuche, die folgende Wirkung zu erzielen:

1. Nach dem ersten Knopf am unteren Boden, die erste Taste auf der Oberseite angeklickt wird, soll es von btn-dark zu btn-warning Klasse ändern.
2. Die verbleibenden Schaltflächen sollten dem gleichen Muster folgen: # b2 clicked sollte dazu führen, dass # d2 von btn-dark in btn-warning geändert wird.

Mein aktueller Versuch:

<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

Versuchen Sie, wie diese

es einer von ihnen zu einer Zeit geändert werden

stackblitz demo link

Answer 2

Verwenden ngClass, z.B .:

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