Angular 2 prevent click on parent when clicked on child
<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>