title: Angular 2 - stop click event propagation
body: <pre><code>toggleCollapse(i) {
    this.toggles[i] = !this.toggles[i];
    return false;
  }
  </code></pre>
  
  <p>I have a parent 'tr tag' with a click event which toggle collapse states. Inside i have a td tag which will hold some content. I want to cancel the click event trigging when clicking on 'the td' tag. Example code:</p>
  
  <pre><code>&lt;tr *ngFor="let record of records; let i = index" class="pointer" (click)="toggleCollapse(i)"&gt;
      &lt;td&gt;{{record.id}}&lt;/td&gt;
      &lt;td&gt;{{record.skapad}}&lt;/td&gt;
      &lt;td&gt;{{record.status}}&lt;/td&gt;
      &lt;td (click)="cancel here"&gt;
        &lt;pre *ngIf="!toggles[i]" class="wrap-whitespaces pointer-text"&gt;{{getShortContent(record.content)}}&lt;/pre&gt;
        &lt;pre *ngIf="toggles[i]" class="wrap-whitespaces pointer-text"&gt;{{record.content}}&lt;/pre&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>