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.

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.

• javascript
• html
• angular

• This might give you more insights: stackoverflow./questions/2385113/… – Ng Sek Long Commented Nov 22, 2017 at 14:20

4 Answers 4

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

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

In your ponent

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

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

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();
}

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

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!