How to pass table row data to popup modal? - angular6

Question

I am currently working on the update table row. I have a table with list of rows
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
</tbody>
</table>
On Edit click a modal will popup that contains table to edit the selected row. This editPopUp function shows up the modal.
ts
editPopUp(){
this.modalOn = true;
}
modal
<app-dialog
[showDialog]="modalOn"
[titleText]="modalTitle"
[hideNegative]="true"
[hidePositive]="true"
(closeButtonClicked)="this.resetModal()"
[level]="1"
>
<form
[formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
(ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)"
>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><input type="text" formControlName="first_name" name="first_name"></td>
<td><input type="text" formControlName="last_name" name="last_name"></td>
<td><a (click)="update()">Edit</a></td>
</tr>
</tbody>
</table>
</form>
</app-dialog>
I am not sure how to pass this row data to this popup?
Any Help please

Answer 1

<!--TableDataComponent.html-->
<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr *ngFor = "let data of dataList">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td><button (click) = "editPopUpmodal(data)">Edit</button></td>
</tr>
</table>
<!--Modal Pop Up -->
<div *ngIf="showModalPopUp">
<input type="text" [(ngModel)] = "editData.id" />
<input type = "text" [(ngModel)] = "editData.name" />
<button (click) = "updateData(editData)" > Update </button>
</div>
Imagine above is your code for table and pop-up (Kindly ignore that there is nothing specific to Modal, I just took an element to show as modal) which are in same component.html
//TypeScript
editData:any = {};
showModalPopUp : boolean = false;
//Constructor, ngOnInit and so on will come
editPopUpmodal = (data) => {
this.showModalPopUp = true;
this.editData = Object.assign(data);
}
updateData = (updatedData) => {
//Call the API through the data service to update the object
}