2

tengo una tabla en Angular 10 con varia información en cada fila. Si presionas en la fila, te lanza a otra página donde se detalla con mas precision la información del elemento seleccionado. Al final de la fila, la última columna, es una columna que contiene dos botones para descargar la información en formato PDF o Docx.

Si presiono el botón se carga el microservicio que descarga el fichero seleccionado, pero al mismo tiempo también te abre el informe del elemento en la siguiente pagina. Como puedo hacer en Angular para localizar si he presionado un botón o si cierto botón o elemento activa el metodo .click(), o si hay alguna manera de aislar la escucha de los dos botones de descarga sin que se active la escucha implementada en cada fila de la tabla.

Estoy empezando con Angular en un proyecto nuevo y no tengo tanta experiencia para el manejo de elementos y escuchas dentro de esta tecnología. Si me pudieran orientar un poco.

Gracias.

componente.html

<table mat-table [dataSource]="data" matSort class="tabla tablaResumen" matTableExporter #exporter="matTableExporter" id="tablaDescargaPdf">
                
    <!-- descarga fichero -->
    <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">
        <div class="row">
          <div class="col-6">
            <button class="noButton" (click)="descargarPDF(row)"><i class="fas fa-file-pdf"></i></button>
          </div>
          <div class="col-6">
            <button class="noButton" (click)="descargarDocx(row)"><i class="far fa-file-word"></i></button>
          </div>   
        </div>
      </td>                  
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="mostrarExpediente(row)"
      class="u-cursor"></tr>
</table>

componente.ts

mostrarExpediente(elemento) {

    sessionStorage.setItem('idExp', JSON.stringify(elemento.idElemento));    

    sessionStorage.setItem('elementoStatus', JSON.stringify({'codigo': elemento.codigoEstadoElemento, 'descripcion': elemento.estadoElementoCorto}));
    

    sessionStorage.setItem('elementoStatus', JSON.stringify(elemento.estadoInforme));
    this.router.navigate(['/' + this.lang + '/backoffice/elemento']);
  }
2
  • Con <mat-row (click)="onRowClicked(row);$event.stopPropagation() "#pdf>evitas que el evento se propague lo verifique pero para capturar los eventos con Observable y mostrarte una solucion al aplicar @ViewChild('pdf',{ read: ElementRef }) pdf!: ElementRef<HTMLButtonElement>; para subcribirme al evento solo me toma la primer fila de la tabla voy a plublicar una consulta sobre como acceder al evento clik de una tabla en angular material ya que puedo hacerlo perfectamente con botones comunes botones de angular material pero al hacerlo con una tabla de material solo responde la primer fila saludos
    – nestdan
    el 21 dic. 2021 a las 16:36
  • como en realidad era como evitar la propagación con el codigo que te respondí se evita específicamente .También se pueden usar Observables algo que consultabas pero eso es del tema que te respondí antes
    – nestdan
    el 21 dic. 2021 a las 18:03

2 respuestas 2

2

Basta con limitar el evento click en mat-cell con (click)="$event.stopPropagation()

 <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  (click)="descargarPDF(row)"   #pdf >PDF</button>
        </div>
        <div>
          <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>

Así Solo respondera al evento especifico individual lo probé imprimiendo para cada evento

 descargarPDF(row:any){
    console.log('PDFclicked: ', row);)
  }
  descargarDocx(row:any){
    console.log('Docx clicked: ', row);
  }
  onRowClicked(row:any){
    console.log('MAT-ROW clicked: ', row);
  }

2
  • Funciona genial, gracias. Había hecho un flag porque resulta que entraba primero en el método de descarga antes del de redireccionamiento, y con un IF lo solucioné, pero tu respuesta es mas sencilla y requiere de menos código. Gracias el 23 dic. 2021 a las 12:33
  • suerte! saludos
    – nestdan
    el 23 dic. 2021 a las 13:02
1

Puedes llamar a stopPropagation() en el evento click de los botones para evitar la propagación del evento por la jerarquía.

Usando como ejemplo el descargarPDF, añades otro parámetro al método para capturar el evento. Y en el cuerpo llamas al método stopPropagation.

descargarPDF(row, event){
  ...
  event.stopPropagation();
}

Y en el vinculo del click botón, le añades como segundo argumento $event para pasar el evento al método.

<button class="noButton" (click)="descargarPDF(row, $event)"><i class="fas fa-file-pdf"></i></button>

saludos

Tu Respuesta

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

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