I've got a dynamically created form that has a simple list (created within a ngFor) that has:
- A parent div that handles the click: it selects or deselects the current item.
- A checkbox that's a child of that div, that is supposed to show the selected/unselected status of the given item.
If you click the div, everything works as expected, but if you click in the checkbox, nothing really happens. It's like the click in the checkbox collides with the div click, not changing the value at all.
The "cleanest" solution I've found this far, is not a clean solution at all, since I still cannot click in the checkbox, but at least it won't give me this weird functioning. Check it out:
<div class="popup-elem" *ngFor="let option of selectedCategory?.options" (click)=" option.active = !option.active"
[ngStyle]="option.active == true
? {'background-color':'aliceblue'}
: {'background-color':'white'}">
<input type="checkbox" [checked]="option.active" style="z-index:550" [disabled]="true">
{{ option.name }}
</div>
I tried other stuff with NgModel and so, but this far this is the best I have. I would be happy if, at least, I could trigger the div's click event when clicking the checkbox, but I don't know how to do so.
Any ideas?