primeng accordion header button

Question

I have Angular 5 application and I am using PrimeNG components. I created the PrimeNG accordion with defined header where are the title and some action buttons, like this:

<p-accordion>
   <p-accordionTab>
      <p-header>
         <span>Some card title</span>
         <p-button title="Delete" (onClick)="deleteCard()"></p-button>
      </p-header>
   </p-accordionTab>
</p-accordion>

Issue is that when I click on the button inside accordion header, the particular accordionTab fire toggle open/close click event, which looks very weird. How I can separate these two clicks?

Thanks for advice.

Answer 1

I know this is an old post, but I'm posting for anyone that comes across this like I did.

In the click method of the button, add $event.stopPropagation(); followed by your own event, such as deleteCard() like in OPs post.

<p-accordion>
   <p-accordionTab>
      <p-header>
         <span>Some card title</span>
         <p-button title="Delete" (onClick)="$event.stopPropagation(); deleteCard()"></p-button>
      </p-header>
   </p-accordionTab>
</p-