how to move to the next input field when tab is pressed in angular table?

Question

how to move to the next input field when tab is pressed in angular table? When presses tab in a cell, the cursor should move to the next cell (left to right). for example in the screenshot below I am currently in editing the name field when I press tab it should move (left to right ) to weigth and if I press tab again it will move to symbol and so on and it should skip if fields are not clickable or dont have pointer events. Thanks for any help and idea.

#my stackblitz

https://stackblitz.com/edit/am-all-imports-65vtbu?file=app%2Fapp.component.ts

#screenshot

Answer 1

You need to attach an event, which watches for keydown.tab and then call the edit of the respective cell.

<input
        (keydown.Tab)="edit(i, 'symbol')"
        matInput
        placeholder="Placeholder"
        (blur)="reset()"
        [(ngModel)]="element.weight"
        appFocusOnLoad
      />

forked stackblitz