Всплывающее окно редактирования не работает после нажатия кнопки в углу 6 при попытке редактирования

Question

Я работаю в CRUD на Angular 6. Моя работа состоит в том, чтобы нажать кнопку редактирования в таблице, в которую вводятся данные, а затем всплывающее окно показать и отредактировать их, и таблица обновится с помощью Angular 6.

Пожалуйста, помогите, спасибо заранее.

Я попытался добавить кнопку, как показано ниже

открытое всплывающее окно, но не

HTML-код:

<td class="tbl2"> 
  <button type="button" (click)="OnClickFunction(employee.id)" class="btn btn-info" matTooltip="Click Edit Button">
   Edit
  </button> 
</td>

Код TS:

OnClickFunction(employeeId: string) { 
  alert('move to Edit page'); 
  this.router.navigate(['/edit/'+employeeId]); 
} 

Answer 1

Код компонента constructor(private data: DataService, public dialog: MatDialog){ }

openDialog(): void { const dialogRef = this.dialog.open(UserProfileComponent, { height: '500px', width: '400px', data: {UserInfo : this.authRslt } });

Html

<button (click)="openDialog()">Edit</button>
(You can pass particular id in click event)