Angular input and tab issues - html

Question

I'm displaying a two dimensional array (Matrix) on the screen as separate input fields.
When I type a number for example "35", "3" is displayed on the screen, the cursor disappears and the "5" is not displayed at all.
What am I doing wrong?
Here is the definition of the matrix in the .ts file - matrix: string[][] ;
It could also be defined as a number but the behaviour stays the same.
Here is the HTML code
<span *ngFor="let row of matrix; let r = index">
<p></p>
<span *ngFor="let cell of row; let c = index">
<input type="text" [(ngModel)]="matrix[r][c]" maxlength="3" size="3">
</span>
</span>
removing "maxlength="3" size="3"" does not change the behaviour.
on the screen I get something like this;
1 2 3
4 5 6
7 8 9
If I want to replay the "1" with 35 after clicking 35 I get
3 2 3
4 5 6
7 8 9
Thanks
Moshik

Answer 1

Because you are using [(ngModel)], this is so called "2 ways bindings" in angular, so when you enter a value into the input, it will also update your matrix variable.
By default, with ngFor, when you change the collection (matrix in this case), it doesn't know what value changed, so it updates the whole thing => re-render the whole template => the input lost focus => you can only enter 1 value at a time.
To fix this issue, we make sure that Angular knows exactly what value is getting updated. And Angular provides us the trackBy function
A function optionally passed into the NgForOf directive to customize
how NgForOf uniquely identifies items in an iterable.
I also provide another way, which is clone your matrix to another variable, use this variable to display in the template, while all the changes are made in the matrix itself. In the link below I named that variable "display". You can see both implementations. The recommended way is ofcourse using the TrackByFn as it built-in and doesn't require another duplicated variable.
https://stackblitz.com/edit/angular-ivy-neezfj?file=src/app/app.component.html