Angular logging click 2 times on one click - forms

Question

I'm trying to create 2 buttons, power on and power off, that have click events for their respected statuses. I have them as radio buttons, but i wanted them to be submitted on click without a submit button, like a switch. So i decide to just have them as pseudo forms, and add click listeners to each to release the event data.
I was testing this by logging the click, and when i click on, the console logs 2 clicks, despite clicking it once.
component snippet
onClick(data: any) {
console.log('click');
}
html snippet
<div class="btn-group" data-toggle="buttons">
<label
class="power-toggle on btn btn-lg btn-success"
(click)="onClick($event)"
>
<input type="radio" name="power" value="power-on" autocomplete="off">
ON
</label>
<label
class="power-toggle off btn btn-lg btn-danger active"
(click)="onClick('off')"
>
<input type="radio" name="power" value="power-off" autocomplete="off" checked>
OFF
</label>
</div>
why is this happening? how can i fix it? is there a way to submit the radio value as is without a submit button or turning the button into a submit button?

Answer 1

You need to bind the click function to the input and not the label.
Please find the plunker example here : https://plnkr.co/edit/Fmhs8xQupAynJfmwtk5y
<div class="btn-group" data-toggle="buttons">
<label
class="power-toggle on btn btn-lg btn-success"
>
<input (click)="onClick($event)" type="radio" name="power" value="power-on" autocomplete="off">
ON
</label>
<label
class="power-toggle off btn btn-lg btn-danger active"
>
<input (click)="onClick('off')" type="radio" name="power" value="power-off" autocomplete="off" checked>
OFF
</label>
</div>