Pick material table value with angular

Question

Good afternoon, I’m trying to get the value of a selected line from a table(Material Table

when you click on a button to edit. I’m researching and I couldn’t find how to capture this, I did something similar to the bootstrap table where I capture the object, but it doesn’t work on the material. The code is like this:

<table mat-table [dataSource]="dataSource" matSort >

        <ng-container matColumnDef="Id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>


        <ng-container matColumnDef="plcDesc">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>PLC</th>
          <td mat-cell *matCellDef="let element"> {{element.plcDesc}} </td>
        </ng-container>            

        <ng-container matColumnDef="IP">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>IP</th>
          <td mat-cell *matCellDef="let element"> {{element.ip}} </td>
        </ng-container>            

        <ng-container matColumnDef="End.PLC">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>End.PLC</th>
          <td mat-cell *matCellDef="let element"> {{element.enderecoPLC}} </td>
        </ng-container>

        <ng-container matColumnDef="Canal IGS">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Canal IGS</th>
          <td mat-cell *matCellDef="let element"> {{element.canalIGS}} </td>
        </ng-container>

        <ng-container matColumnDef="Device IGS">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Device IGS</th>
          <td mat-cell *matCellDef="let element"> {{element.deviceIGS}} </td>
        </ng-container>

        <ng-container matColumnDef="Pasta">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Pasta</th>
          <td mat-cell *matCellDef="let element"> {{element.pasta}} </td>
        </ng-container>

        <ng-container matColumnDef="Tag IGS">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Tag IGS</th>
          <td mat-cell *matCellDef="let element"> {{element.tagIGS}} </td>
        </ng-container>

        <ng-container matColumnDef="End.OPCCompleto">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>End. OPC Completo</th>
          <td mat-cell *matCellDef="let element"> {{element.enderecoOPCFull}} </td>
        </ng-container>

        <ng-container matColumnDef="ID Config">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>ID Config</th>
          <td mat-cell *matCellDef="let element"> {{element.configuracaoId}} </td>
        </ng-container>

        <ng-container matColumnDef="Planta">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Planta</th>
          <td mat-cell *matCellDef="let element"> {{element.configuracao.planta}} </td>
        </ng-container>

        <ng-container matColumnDef="Linha">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Linha</th>
          <td mat-cell *matCellDef="let element"> {{element.configuracao.linha}} </td>
        </ng-container>

        <ng-container matColumnDef="Sigla">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Sigla</th>
          <td mat-cell *matCellDef="let element"> {{element.configuracao.plantaReduzida}} </td>
        </ng-container>

        <ng-container matColumnDef="ID Variável">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>ID Variável</th>
          <td mat-cell *matCellDef="let element"> {{element.tipoVariavelId}} </td>
        </ng-container>

        <ng-container matColumnDef="Desc. Variável">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Desc. Variável</th>
          <td mat-cell *matCellDef="let element"> {{element.tipoVariavel.descricao}} </td>
        </ng-container>   

        <ng-container matColumnDef="Opcoes">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Opções</th>
          <td mat-cell *matCellDef="let element">
            <button mat-raised-button color="primary">Alterar</button>&nbsp;
            <button mat-raised-button color="warn" (click)="excluirData(plc, confirm)">Excluir</button>
          </td>
        </ng-container>            

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

<div bsModal #confirm="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-sizes-name1">
  <div class="modal-dialog modal-sm">
  <div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title pull-left">
          Deletar
        </h4>
        <button type="button" class="close pull-right" (click)="confirm.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>{{bodyDeletarPlc}}</p>
    </div>    
    <div class="modal-footer btn-group d-flex">      
        <button type="button" class="btn btn-outline-primary" (click)="confirm.hide()">
          Cancelar
        </button>
        <button type="button" class="btn btn-outline-danger" tooltip="Excluir" >
            Deletar
        </button>
    </div>
  </div>
  </div>
</div>

By clicking delete, you are not taking the data.

Answer 1

<td mat-cell *matCellDef="let element">
      <button mat-raised-button color="primary" (click)="alterarData">Alterar</button>&nbsp;
      <button mat-raised-button color="warn" (click)="excluirData(element)">Excluir</button>
</td>

Friend use the variable element, look at the code above, so it is taking the object of the line corresponding to the button and taking it to the method input