how to focus on next input field with press enter key in angular4
you are using the *ngFor in a wrong way, it repeats the element which is placed on.
you need to set the *ngFor on the li element.
<ul>
<li *ngFor="let dataloop of dataloops">
{{dataloop.name}}
<input type="text" name="intext"
[(ngModel)]="dataloop.url" #ft01 (keyup.enter)="keytab($event)"/>
</li>
</ul>
now update the .ts file as following
keytab(event){
let element = event.srcElement.nextElementSibling; // get the sibling element
if(element == null) // check if its null
return;
else
element.focus(); // focus if not null
}
this code should work fine.
you have to use the renderer to access next sibling element; using renderer2 : inject renderer2 in the constructor and then:
this.renderer2.parentNode(this.el.nativeElement).focus();