I am trying to create a table with 9 rows and 9 columns of text boxes, the point is that the table is built dynamically using Angular's mechanism,
I have a class in the ts file of Angular that contains a two-dimensional array of strings and I fill this array with empty strings, in the html file I go over this array and based on it I build the text boxes. My problem occurs when, after the creation of the text boxes, I enter some value in a random text box, and what actually happens is the text is copied to an adjacent text box and the focus also moves to the adjacent text box.
The thing is that I activate a click event in which I enter the value from the text box and put it in the cell according to the index of the row and column of the two-dimensional array of the string
As soon as the value enters this array, the focus and the value itself is displayed in the adjacent text box, I tried all kinds of ways, also with the databinding mechanism with two way,
Without the need to write one event or another, but the problem occurs anyway.
The solution I made is to duplicate the two-dimensional array of the strings and on the duplicated array to save the values of the text boxes, the problem is that it is not a clean solution! I simply want to understand why this phenomenon occurs and how it can be overcome correctly

code in angular file ts:

The problematic section in the following event:
handleInput