Angular 4 change css by id

I am trying to change CSS property by element ID using vanilla JS?

I am trying to achieve the following effect:

1. After the first button is clicked on the bottom bottom, the first button on the top should change it's class from btn-dark to btn-warning.
2. The remaining buttons should follow this same pattern: #b2 clicked should result in #d2 being changed from btn-dark to btn-warning.

My current attempt:

<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