How to traverse dom in Angular 5

Question

I am using Angular 5 for one of my projects. In one of my component, I have an HTML table, in which I have input fields.

Now I need keyboard shortcuts for this input fields, for example, if a user press enter key, the next input field should be focused. Same way if a user press backspace key just previous field should be focused.

This type of operation I have done earlier in jQuery, using $(this).next('input').focus(); and $(this).prev('input').focus();.

Now how can I do the same thing in Angular 5?

Also, In some case, I have nested table and input fields inside this nested tables. I need the same behavior on that input fields (just .next() and .prev() is not enough, we need to find the next input field form the DOM).

How can I achieve this? Please help.

EDIT

What I have tried so far

<input id="first_element_{{i}}" type="text" class="form-control" #particular [required]="transaction.amount" [(ngModel)]="transaction.selectedAccount.account" (keyup)="searchAccount($event?.target?.value);" (focus)="onAccountFocus(transaction.type === 'A' ? amountField1 : amountField2, transaction.type, i);" (blur)="onAccountBlur($event);" [ngClass]="{'focus': isSelectedRow && selectedIdx === i}" (keydown)="detectKey($event)" (keydown.Tab)="validateAccount(transaction, $event, i)">

I have added (blur), (keydown) and (keydown.Tab) to achieve this but at the end I am not able to find the exact next and prev elements from the dom.

Why is a solution like this not enough? https://stackoverflow.com/questions/41283650/move-focus-to-next-control-on-key-enter — Adelin, Jun 20 '18 at 06:07
`Now how can I do the same thing in Angular 5?` What have you tried so far? — StudioTime, Jun 20 '18 at 06:19
I have tried https://stackoverflow.com/a/41311816/5369031 this answer, but in `e.srcElement.nextElementSibling` I am getting `table` element instead of `input` fields inside `table > tbody > tr > td`. — Arpit Kumar, Jun 20 '18 at 07:02

score 0 · Answer 1 · answered Jun 21 '18 at 08:56

You can work with '@ViewChildren('name')' inputs : QueryList and putting '#name' on your focusable inputs. This will give you a queryList of ElementRef witch could be focusable (element.nativeElement.focus()). For me you should work with a HostListening like '@HostListener('window:keyup', ['$event'])' to trigger each keys event, so inside you could get your input list, the input where the event is trigger ($event). It just still to put the focusable logic inside! I hope it's help you !

How to traverse dom in Angular 5

1 Answers1