Passar variável de um template html para um component.ts

Programação
#1

Estou fazendo um Crud com Angular e Spring e travei em como passar o usuario.id do template para o component para deletar um usuário pelo id usando um Dialog do Angular Material.

Meu código está assim:

A parte da tabela que fica o botão delete (em usuario.component.html):

<ng-container matColumnDef="acoes">

        <th mat-header-cell *matHeaderCellDef> &nbsp; </th>
        <td mat-cell *matCellDef="let usuario">
            <button mat-mini-fab color="primary"
                (click)="openDialogDelete(usuario.id)">
                <span class="material-icons md-18">delete</span>
            </button>
        </td>

    </ng-container>

O usuario.component.ts, método que abre o Dialog p/ confirmar a exclusão:


openDialogDelete(id: number): void {

    const dialogRef = this.dialog.open(ModalDeleteComponent, {
      width: '250px'});
 }

O dialog:

<h1 mat-dialog-title>Deletar usuário</h1>
<div mat-dialog-content>
  Confirma a exclusão desse usuário?
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close
  (click)="onNoClick()">Não</button>
  <button mat-button mat-dialog-close cdkFocusInitial
  (click)="deleteUserById()">Sim</button>
</div>

E o component do dialog, é aqui que quero passar aquele usuario.id que peguei no primeiro código, usuario.component.html:

 public deleteUserById() {
    this.usuarioService.deleteUserById(* colocar aqui o id pego do template *)
      .subscribe(result => " ");
 }

Valeu! Espero que alguém posso me ajudar :slight_smile:

#2

Pesquisando aqui, parece que é assim:

No componente que chama a dialog vc passa os dados na propriedade data:

const dialogRef = this.dialog.open(ModalDeleteComponent, {
  width: '250px',
  data: {
    idUsuario: id
  }
});

E no componente do dialog, vc injeta e recupera os dados:

import { MD_DIALOG_DATA } from '@angular/material';

constructor(
   @Inject(MD_DIALOG_DATA) public data: any
) { }

public deleteUserById() {
  this.usuarioService.deleteUserById(this.data.idUsuario)
    .subscribe(result => "");
 }