Wsrtjtyk

How can you trigger a modal with a button inside a mat-table without triggering the rows (click) event? I've seen and read with Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell however the solution of using $event.stopPropagation() there prevents the modal from being displayed.

I followed this https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html for the row expansion functionality.

Here's a small snippet of my code:

<mat-table [dataSource]="dataSource"  matSort>

        <ng-container matColumnDef="name">

          <mat-header-cell *matHeaderCellDef  mat-sort-header>Name</mat-header-cell>

          <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>

        </ng-container>

        <ng-container matColumnDef="username">

          <mat-header-cell *matHeaderCellDef  mat-sort-header>Username</mat-header-cell>

          <mat-cell *matCellDef="let element">{{element.username}}</mat-cell>

        </ng-container>

        <ng-container matColumnDef="email" class="hideOnResponse">

          <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>

          <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>

        </ng-container>

        <ng-container matColumnDef="action">

          <mat-header-cell *matHeaderCellDef></mat-header-cell>

          <mat-cell *matCellDef="let element">

              <a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">

                <i class="fas fa-pencil-alt"></i>

              </a>

              <a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">

                <i class="fas fa-trash-alt"></i>

              </a>

          </mat-cell>

        </ng-container>



        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

        <mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row" [ccDetailRow]="row" [ccDetailRowTpl]="tpl"></mat-row>

        <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':dataSource!=null}"></mat-footer-row>

        <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(dataSource!=null && dataSource.data.length==0)}"></mat-footer-row>

      </mat-table>

      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>

I've tried doing what was stated on the question linked above but to no avail. Is there any other way?

Got answer from here. link

As Will says:

Try adding $event.stopPropagation() to one of the deeper click
handlers (like on the cell).

try doing something similar to this:

<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">

    <button mat-button (click)="onDelete(group.id)">

        <mat-icon>delete</mat-icon>

    </button>

</mat-cell>

in your case If I'm correct it would be:

      <mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">

          <a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">

            <i class="fas fa-pencil-alt"></i>

          </a>

          <a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">

            <i class="fas fa-trash-alt"></i>

          </a>

      </mat-cell>

What I had before was that I had edit and delete button in expanded view. I put them in the normal view and added stopPropagation. It worked for me. I am not sure why your modal isn't being open.

here's code from my project:

<ng-container matColumnDef="recordDate">

  <th mat-header-cell *matHeaderCellDef mat-sort-header> Record Date </th>

  <td mat-cell *matCellDef="let request" (click)=$event.stopPropagation()> {{request.recDate | date }} 

  <button mat-icon-button>

    <mat-icon aria-label="Example icon-button with a heart icon" (click)="openDialog(true, request.requestId)">edit</mat-icon>

  </button>

  <button mat-icon-button>

    <mat-icon aria-label="Example icon-button with a heart icon" (click)="deleteRequest(request.requestId)">delete</mat-icon>

  </button>

</td>

</ng-container>