bind keyup.enter with tab using angular

Question

do someone knows how i can bind the keyup.enter proproty to the tab of the keyboard? i mean i want that when i enter the value in a first field of my form that i spring in the second field. Like:

<form>
<label for="xxx">first:
 <input type="text" id="first" name="first" (keyup.enter)="enterFirst(firstName)">
</label>
<label for="xxx">second:
 <input type="text" id="second" name="second" (keyup.enter)="enterSecond(lastName)">
</label>
.
.
.
<button type="button" class="btn btn-success" (click)="sendNames(xxx)">valid</button>
</form>

So i would to be able to spring on the field second when i give the firstname and click on enter.

Do someone have an idea? thanks in advance

Answer 1

This should work, although it is vanilla JS:

<input type="text" id="first" name="first" onkeyup="if (event.keyCode == '13') {enterFirst(this)}">

(EDITED: Replaced "firstName" with "this")

Answer 2

HTML:

   <h1>Here we will try to bind  the keyup.enter with Tab</h1>
   <div class="container">
   
     <h2>Please enter datas an click on enter</h2>
     <form>
       <div class="row">
         <div class="form-group col">
           <label for="fname">Enter your firstname:</label>
           <input type="text" class="form-control" placeholder="enter your firstname and click enter"
         id="fname" name="fname" onkeyup="if (event.keyCode == '13') {enterFirst(this)}">
         </div>
         <div class="form-group col">
           <label for="lname">Enter your lastname:</label>
           <input type="text" class="form-control" placeholder="enter your lastname and click enter"
         id="lname" name="lname" onkeyup="if (event.keyCode == '13') {enterLast(this)}">
         </div>
       </div>
       <button type="button" class="btn btn-success" (click)="sendData()">submit</button>
     </form>
   
   </div>

Ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angulartest';
  public firstname: string;

  constructor(){}

  ngOninit(){

  }

  enterFirst(firstname){
    console.log(firstname);
  }

  sendData(){

  }
}

I wrote it just to see if i can spring to the field lastname by clicking on enter after the firstname