Pude hacerlo con un button de HTML también con un button de Angular Material Pero en una tabla de Angular Material solo consigo hacerlo en la primer fila Utilice primero fromEvent creando observables que emiten clicks event al no obTener el resultado deseado lo intente luego con Renderer2 tdo indica que @ViewChild solo responde a la primer fila trate entonces con @ViewChildren() que creo seria la forma tampoco logre hacerlo dentro de una tabla de angular material
import { Renderer2,AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { defer, fromEvent, Observable } from 'rxjs';
import { debounceTime, map, tap, switchMap } from 'rxjs/operators';
// modal de una tabla
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'},
];
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'app-material',
templateUrl: './material.component.html',
styleUrls: ['./material.component.scss']
})
export class MaterialComponent implements AfterViewInit , OnInit, OnDestroy{
buttonsClik!:() => void;
documentClick!: () => void;
// funciona con un boton comun se usa { static: true }
@ViewChild('testBtn', { static: true }) testBtn!: ElementRef<HTMLButtonElement>;
event$ = defer(() => fromEvent(this.testBtn.nativeElement, 'click')).pipe(
map(() => new Date().toString()),
tap(console.log)
)
//funciona para un button externo de Angular Material #pdfExterno a la tabla se usa { read: ElementRef }
@ViewChild('pdfExterno',{ read: ElementRef }) pdfExterno!: ElementRef<HTMLButtonElement>;
// logro capturar solo los eventos de primer fila de la tabla usando distintas estrategias
@ViewChild('docx',{ read: ElementRef }) docx!: ElementRef<HTMLButtonElement>;
pdfExterno$=defer(() => fromEvent(this.pdfExterno.nativeElement, 'click')).pipe(
map(() => new Date().toString()),
tap(console.log)
)
@ViewChild('pdf',{ read: ElementRef }) pdf!: ElementRef<HTMLButtonElement>;
@ViewChild('mostrar',{ read: ElementRef }) mostrar!: ElementRef<HTMLButtonElement>;
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','descargaPdfDoc'];
dataSource = ELEMENT_DATA;
// otra forma intento con Renderer2 intento capturar no solo a los eventos click() de la primer fila
constructor(private renderer: Renderer2) { }
ngOnDestroy(): void {
this.buttonsClik();
this.documentClick();
}
ngOnInit(): void {
this.event$.subscribe();
}
ngAfterViewInit() {
this.pdfExterno$.subscribe()
this.render();
console.log(this.pdf);
console.log(this.docx);
console.log(this.mostrar);
/* Modicficando el codigo intente usar merge solo escucha 1 fila
<div>
<button id="pdf" #pdf (click)="(pdf.id) ;descargarPDF(row)" >PDF</button>
</div>
<div>
<button id="docx" #docx (click)="(docx.id);descargarDocx(row)" >DOCX </button>
</div>
</div>
*/
merge(
fromEvent(this.pdf.nativeElement, 'click'),
fromEvent(this.docx.nativeElement, 'click'),
).subscribe((event: Event | null)=> {
console.log('desde Merge',event?.target);
});
/* tampoco resulto solo 1 fila creando a un observable que emite click event
docx$!: Observable<any>;
this.docx$=fromEvent(this.docx.nativeElement, 'click')
.pipe(
map(()=>new Date().toString()),
tap(console.log)
)
this.docx$.subscribe(e=>console.log('docx',e))
*/
}
render(){
this.documentClick = this.renderer.
listen('document', 'click', (event:MouseEvent) =>{
console.log('Desde render docx',event)
} )
this.buttonsClik= this.renderer.
listen(this.docx.nativeElement, 'click', (event:MouseEvent) =>{
console.log('Desde render docx',event)
} )
this.renderer.listen(this.pdf.nativeElement, 'click', (event) => {
console.log('Desde render pdf',event)
})
this.renderer.listen(this.mostrar.nativeElement, 'click', (event) => {
console.log('Desde Render mostrar',event)
})
}
onDocumentClick(e: any): boolean | void {
throw new Error('Method not implemented.');
}
descargarPDF(row:any){
console.log('pdf',row)
}
descargarDocx(row:any){
console.log('docx',row)
}
onRowClicked(row:any): void{
console.log('mat-row',row)
}
descargarPDFFueraDeMatTable(){
console.log('funciona')
}
}
<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()"
#pdfExterno>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 mat-sort-header>Descarga</th>
<td mat-cell *matCellDef="let row" class="u-text-align-center" (click)="$event.stopPropagation()">
<div class="row">
<div>
<button mat-raised-button (click)="descargarPDF(row)" #pdf>PDF</button>
</div>
<div>
<button mat-raised-button (click)="descargarDocx(row)" #docx>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>
table {
width: 100%;
}
mat-raised-button {
width: 10px;
}
console.log
No estoy seguro y quizá baste con el listener nativo de HTML5