Angular 2 Dynamically Modify Bootstrap Button in Table



I am using Angular 2, Typescript and BootStrap components.

I have a table in which I am adding various data. In the last column I’m adding a BootStrap button.
When I click one of these buttons I want it to change color (and other things), however all the buttons in the column are changing color.
Presumably I need to use the $event to specifically identify a button? i.e.
Maybe I am just going about this all wrong?

////In the Template

’ <tr *ngFor=“let object of objects”>

<button data-toggle=“collapse”
class=“btn btn-{{buttonType}} btn-xs”>


////In the Component

buttonType = ‘default’

toggleColor(event) {
if(this.buttonType == ‘success’) {
this.buttonType = ‘default’;
} else {
this.buttonType = ‘success’

If someone could offer some advice it would be great.


Rob S