Skip to main content
1 de 2
nestdan
  • 1.3k
  • 1
  • 8
  • 14

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>

nestdan
  • 1.3k
  • 1
  • 8
  • 14