En stackoverflow en ingles publique esta misma pregunta comparto la respuesta que me dieron la cual responde distinguiendo a cada fila de la tabla de Angular Material en forma simple y limpia
import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
export interface PeriodicElement {
name : string;
position : number;
weight : number;
symbol : string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];
interface RenderJob {
type: 'pdf' | 'docx';
data: PeriodicElement
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
private rowClick$ = new Subject<PeriodicElement>();
private renderJob$ = new Subject<RenderJob>();
dataSource = ELEMENT_DATA;
displayedColumns = [ 'position', 'name', 'weight', 'symbol', 'descargaPdfDoc'];
ngOnInit() {
this.rowClick$.subscribe(
row => console.log('[row clicked]', row)
);
this.renderJob$.subscribe(
({ type, data }) => console.log(`[render job received] type: ${type}`, data)
);
}
descargarPDF(row: PeriodicElement) {
this.renderJob$.next({ type: 'pdf', data: row });
}
descargarDocx(row: PeriodicElement) {
this.renderJob$.next({ type: 'docx', data: row });
}
onRowClicked(row: PeriodicElement): void {
this.rowClick$.next(row);
}
descargarPDFFueraDeMatTable() {
console.log('funciona');
}
}
Responde a cada evento clik dentro de la tabla de angular material
h1>Fuera de la Tabla sin problemas</h1>
<section>
<div>
<button #testBtn>Click me</button>
</div>
<div></div>
</section>
<button mat-raised-button (click)="descargarPDFFueraDeMatTable()">
PDF
</button>
<h1>Dentro de la tabla solo puede vincular a un Observable para la 1 fila</h1>
<div class="container text-center">
<table mat-table [dataSource]="dataSource" #mytable class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef>Weight</th>
<td mat-cell *matCellDef="let element">{{ element.weight }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef>Symbol</th>
<td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
</ng-container>
<ng-container matColumnDef="descargaPdfDoc">
<th mat-header-cell *matHeaderCellDef>Descarga</th>
<td
mat-cell
*matCellDef="let row"
class="u-text-align-center"
(click)="$event.stopPropagation()"
>
<div class="row">
<div>
<button id="pdf" (click)="descargarPDF(row)">
PDF
</button>
</div>
<div>
<button id="docx" (click)="descargarDocx(row)">
DOCX
</button>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
#mostrar
(click)="onRowClicked(row); $event.stopPropagation()"
></tr>
</table>
</div>