I am encountering an issue with an input checkbox field that is nested inside a label tag in HTML using Bootstrap 4 and Angular 7. When I call a function on the click event of the input checkbox and pass its state "($event.target.checked)" as one of the arguments, all I receive is "undefined". However, if I call the function directly from the input:checkbox without the label tag as the parent element, it works perfectly fine. Unfortunately, I need the former option to work as intended.
Case 1: ">div>
label (click)="onChange('father', $event.target.checked, 'diabetes')" class="btn btn-sm rounded-pill position-relative mb-2 mx-2"> input type="checkbox" name="diabetes" autocomplete="off"> Father /label "
Case 2: ">div>
input type="checkbox" (click)="onChange('father', $event.target.checked, 'diabetes')" name="" id="">Father /div>"
Upon console logging both cases in my function, I observe that in the first case where the label is outside the input field, I receive undefined whereas it works flawlessly without the label as shown in case 2, providing true and false results. Is there anyone who can assist me in getting true and false values in case 1 as well?