Angular logging click 2 times on one click

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>