bind keyup.enter with tab using angular - html

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