0

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;
 }

4
  • ¿Qué finalidad tiene escuchar todos los eventos click? No entiendo para que podrías usarlo Commented el 24 dic. 2021 a las 16:58
  • Modifique la pregunta quizás no se entendía de acuerdo al texto la finalidad de la pregunta gracias
    – nestdan
    Commented el 24 dic. 2021 a las 22:00
  • Perdón nestan, pero sigo sin entender, que finalidad tiene crear observables en cada row. ¿Cuál es el objetivo? Veo lleno de console.log No estoy seguro y quizá baste con el listener nativo de HTML5 Commented el 25 dic. 2021 a las 18:46
  • El codigo muestra que la finalidad es solo Teorica y lo explico en las características de la pregunta los console.log muestran el resultado de distintas estrategias en todas solo puedo subscribirme a los eventos click de la primer fila de la tabla de angular material
    – nestdan
    Commented el 25 dic. 2021 a las 20:32

1 respuesta 1

0

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 respuesta

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.