title: Disable (click) for element inside division - Angular/Typescript
body: <p>I'm using angular/typescript for my web development project.</p>
  
  <p>I'm looking for an efficient way to apply <code>(click)</code> event to only a division and not some selective elements inside it.</p>
  
  <p>For example, consider the division :</p>
  
  <pre><code>&lt;div class='card' (click)="card_click()"&gt;
      &lt;button (click)="whatever($event)"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, click on button will call both the functions.</p>
  
  <p>It is very common to catch the event in the function and call <code>event.stopPropagation()</code> and stop the propagation.</p>
  
  <p>But in special cases like a drop-down (consider following image) this thing can become tricky.</p>
  
  <p><a href="https://i.stack.imgur.com/yYFz9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yYFz9.jpg" alt="example div"></a></p>
  
  <p>I can use event of the card to check target of the mouse click to acheive the same.</p>
  
  <p>I wouldn't call this the most efficient approach, but it still works.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class='card' (click)="card_click($event)"&gt;
      &lt;button (click)="whatever($event)"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Typescript :</p>
  
  <pre><code>card_click(event) {
  
      //dropdown button catches SPAN or A
      if(event.target.tagName == "SPAN" || event.target.tagName == "A") {
          event.stopPropagation()
      }
      //do the rest
  }
  </code></pre>
  
  <p>I will not prefer this solution because every time i add a new element on the card, I will have to edit this function.</p>
  
  <p>Is there any other <i>neat</i> solution for this?</p>
  
  <p>Thank you</p>