CODEWITHSUNDEEP
angular
Sunny Srivastava
Sunny Srivastava

Reputation: 179

How to prevent row from expanding when a column has href/click event on it in a Mat-Table?

I have a Mat-Table with nested nested tables which can be accessed by expanding the mat-rows .

For some columns i have a HREF link / Button which opens a popup / alert box . In that case i dont want the row to be expanded . Currently after the alert is closed the row gets expanded .

I tried researching online and tried with putting href="javascript:void(0);" in the anchor tag but that didnt work .

Here's the StackBlitz Link for my issue

Can anyone help me with the suggestions ? Thanks in advance .

Upvotes: 2

Views: 1040

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4790

In your template, pass the $event to your openAlert() method.

(click)="openAlert($event)"

Then, in your typescript file update the openAlert() method to accept that event, and stop the propagation of the click event:

  openAlert(event: MouseEvent) {
    event.stopPropagation();
    alert("Hiiii");
  }

You can read more about stopPropagation here.

Here's an updated stackblitz.

Upvotes: 4

Related Questions