title: Angular 10 click event propagation
body: <br>
  I want to manually modify the value of an input checkbox by clicking everywhere on its html parent.
  <p>Here is my HTML:</p>
  <pre><code>&lt;div (click)=&quot;onChange($event)&quot; class=&quot;option&quot; *ngFor = &quot;let option of answerForm.options&quot;&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;{{answerForm.type}}{{answerForm.id}}&quot; value=&quot;{{option}}&quot;&gt;
      &lt;label&gt;{{option}}&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is my typescript:</p>
  <pre><code>onChange($event): void {
      if ($event.target !== $event.currentTarget) {return;}
      $event.target.children[0].checked = !$event.target.children[0].checked;
  }
  </code></pre>
  <p>The event works correctly when I click on the div.<br>
  When I click on the label, the event is trigger, with the label as a target and doesn't pass the condition as expected.  <br>
  I expect the event propagation to automatically trigger the event for the parent, but it doesn't. It seems to be the default behavior of Angular but I am not really sure.</p>
  <p>Do you have any solution to only trigger the click event for the div wherever the click is made on it ?</p>