Angular 2 Dynamically Modify Bootstrap Button in Table

angular
1

Hi,

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. event.target.id
Maybe I am just going about this all wrong?

////In the Template

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


<button data-toggle=“collapse”
(click)="toggleColor($event)"
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.

Thanks

Rob S