title: Angular 2 prevent click on parent when clicked on child
body: <p>I have a click event nested one level. When i click on the child the expected function is called but the parent's function is also called. Here is the code</p>
  
  <pre><code>&lt;li class="task-item" *ngFor="let task of tasks" (click)="showTask(task.name)"&gt;
      &lt;input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event)" /&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>So when the checkbox changes <code>changeTaskStatus()</code> and the <code>showTask()</code> called together. I want the parent to keep quiet when checkbox changes. How do I achieve this? It was easy to handle this in Angular 1</p>
  
  <p>Things I've tried that failed</p>
  
  <p>Used <code>$event.stopPropagation()</code> in the checkbox's click event that changed nothing </p>
  
  <pre><code>&lt;input type="checkbox" [ngModel]="task.taskStatus" (click)="$event.stopPropagation()" (ngModelChange)="changeTaskStatus($event)" /&gt;
  </code></pre>