2

I have a div with a button inside of it that minimizes the div. If you click anywhere else inside the div it will load details about the div. However, I don't want to load details if minimizing the div. Here is my code:

<div (click)="showDetails(key)" *ngFor="let key of keys">
    <button (click)="minimize(key)">Minimize</button>
    <span>The rest of the content is here</span>
</div>

When minimize is triggered, I want to ignore showDetails.

user3483203
  • 50,081
  • 9
  • 65
  • 94
  • This might give you more insights: https://stackoverflow.com/questions/2385113/howto-div-with-onclick-inside-another-div-with-onclick-javascript – Ng Sek Long Nov 22 '17 at 14:20

4 Answers4

13

I'm not able to test it right now, but what you could try is 

(click)="minimize(key, $event)"

In your component

minimize(key, event) {
  event.preventDefault();
  event.stopPropagation();
}

Try with either one of them and see how it goes !

4

what you have to do is to ignore the parent click event by stopping the propagation of the event using stopPropagation()

html code :

<div (click)="showDetails(key)" *ngFor="let key of keys">
    <button (click)="minimize(key,$event)">Minimize</button>
    <span>The rest of the content is here</span>
</div>

ts code :

minimize(key,event){
       event.stopPropagation();
}
Mohamed Ali RACHID
  • 3,245
  • 11
  • 22
0

use event.stopPropagation() to prevent the click event from bubbling up the DOM.

priyadarshi swain
  • 246
  • 1
  • 8
0

What i did here to get around it pretty simple where you do not need create the function/method.

<div (click)="showDetails(key)" *ngFor="let key of keys">
    <button (click)="$event.stopPropagation()">Minimize</button>
    <span>The rest of the content is here</span>
</div>

Hope this helps!

jAC
  • 3,155
  • 3
  • 18
  • 29
  • Actually now that i read this, they likely need to do more with the click event but when i searched for an answer, this is all i needed. Still hope it helps someone :) – jAC Sep 03 '19 at 18:44