How to edit or add one row at a time using reactive forms in angular8

Question

I have a list of data, when i click on rows, all the rows are editable and when i click on edit button of the expanded row, all the rows will have the same value as in the f

Answer 1

See working demo

You need to add a flag for each row, and set it to true when the row is editable, currently you are using a common variable eoDetailsList to decide row is editable or not, and that affects all rows.

I have added these two flags. Yes you need to add manually

Answer 2

You are using common controller eoDetailsList to ensure it is editable or not. That controller is affecting of the related functions in your project. The easiest way is controller for each task, like editable: true or editable: false. It will not affect whole projects rather than let you allow to edit the particular row.