title: Angular 4: stopPropagation() works, but also stops any further DOM update
body: <p>I have a <code>&lt;table&gt;</code> of users. Each <code>&lt;tr&gt;</code> can be clicked to open an information panel with the details of the user. Clicking it again closes the panel.</p>
  
  <pre><code>&lt;tr (click)="data.info = invert(data.info);"&gt;
  </code></pre>
  
  <p>The <code>&lt;tr&gt;</code> also has icons to modify or delete the user. These are in separate <code>&lt;td&gt;</code>s.</p>
  
  <pre><code>&lt;td (click)="delete(data?._id, rowIndex); $event.stopPropagation();"&gt;
  </code></pre>
  
  <p>The problem is when I click the modify or delete icons, the <code>&lt;tr&gt;</code>'s <code>(click)</code> event also fires. Yep, this can be easily solved by adding <code>$event.stopPropagation()</code> to the function I call. But interestingly it stops not only the parent element's click event from firing, but also any other action in the DOM.</p>
  
  <p>The function invoked when clicking the delete icon is simply changing a variable which should cause a confirmation box (which is a <code>div</code>) to appear by <code>ngIf</code>. The variable indeed changes, but the <code>div</code> doesn't appear, only after I click the icon a second time. Interestingly though, it also works if for the second time I click anywhere on the screen.</p>
  
  <p>The same happens even if the <code>&lt;tr&gt;</code> has no <code>(click)</code> action.</p>
  
  <p>It doesn't help if I move <code>stopPropagation()</code> to the <code>delete</code> function I invoked, and it doesn't matter where I put it in the function.</p>
  
  <p>The question is if I am using the proper way to stop propagation when clicking the <code>&lt;td&gt;</code>?</p>