Bootstrap 4 button inside card component that has click event - html

Question

I have the following html code to generate a basic card using bootstrap 4.
I want to change the style of the card when the card is clicked. However, if the button is clicked, I dont want the style to change.
At the moment, when I click test1 button, I will also activate the function onCardClick().
Is there a way to do this such that when I click on the test button1 only Test1() executes
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" (click)="onCardClick()">
<div class="card-block">
<h4 class="card-title d-inline">Some Title</h4>
<button class="btn btn-primary" (click)="onTest1()">test1</button>
<button class="btn btn-primary" (click)="onTest2()">test2</button>
</div>
</div>
</div>

Answer 1

You could try this to stop the event from bubbling up the dom:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card"
(click)="onCardClick()">
<div class="card-block">
<h4 class="card-title d-inline">Some Title</h4>
<button class="btn btn-primary"
(click)="onTest1($event)">test1
</button>
<button class="btn btn-primary"
(click)="onTest2($event)">test2
</button>
</div>
</div>
</div>
</div>
</div>
And in your component:
import {Component} from "#angular/core"
#Component({
selector: 'test',
})
export class Test
{
onTest1(event)
{
event.stopPropagation();
//or event.preventDefault()
//stuff to run
}
onTest2(event)
{
event.stopPropagation();
//stuff to run
}
}