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();

Tags:

Angular