Pass data from dynamic mat-cell to on-click function

Question

I have a mat-table that I am using to display data being received from a service. One of the columns within this table displays a property name stored in the objects that are displayed in the table.

My table looks like this.

<table class="session-table" mat-table [dataSource]="sessions">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.sessionName}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="date">
        <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.sessionDate}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="link">
        <mat-header-cell *matHeaderCellDef>Link</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.sessionLink}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef>Control</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <button mat-icon-button (click)="showDeleteModal()"><mat-icon><fa name="trash" size="lg"></fa></mat-icon></button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </table>

I want to be able to take the name property and pass it to the showDeleteModal() function that is called by the button in the fourth cell of each row. However I can't just access this data by doing {{element.sessionName}}, how else can I access this data and pass it to my function?

Answer 1

Just pass row object in the function.

This should work: (click)="showDeleteModal(row)"

Afterwards, you can retrieve name attribute like this:

showDeleteModal(row) {
   console.log(row.name);
}