title: Stop click event propagation of all children
body: <p>How to stop the <code>click</code> event propagation of all children elements: </p>
  
  <pre><code>&lt;div (click)="openModal()"&gt;
      &lt;span&gt;Click in this element open the modal&lt;/span&gt;
      &lt;li&gt;Click in this element open the modal too&lt;/li&gt;
      &lt;p&gt;Click in this element open the modal too&lt;/p&gt;
      &lt;input type="button"&gt;Click in this element open the modal too&lt;/input&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to open the modal only with the <code>div</code> element. Is there a way to do it?</p>