Enter event doesn't trigger the function on Android device using angular

Question

There are multiple questions with answers related to my problem but unfortunately, none worked for me.

I have to detect the enter pressed on android keyboard and change focus from current matInput to next matInput.

I have tried keyup.enter, keydown and keypress but none worked for me. I implemented directive approach but doesn't trigger method when I am debugging app on Android device. Although, it does trigger the method on browser.

Here is what I am using.

HTML:

    <mat-form-field class="ib-input-container-width">
  <input matInput data-dependency="lastName" (keypress)="onChange($event.keyCode)" (keyup.enter)="handleNext('lastName')"  [formControl]="form.get('FirstName')" type="text" >

</mat-form-field>

<mat-form-field class="ib-input-container-width" >
  <input #lastName id="lastName" matInput  [formControl]="form.get('LastName')" type="text">

TS:

  handleNext(elementId){
    let nextElement = document.getElementById(elementId);
    console.log(nextElement);
    nextElement.focus();
  }

  onChange(event){
    console.log(event.keycode);
  }

PS: I am on a working progressive web app using Cordova.

Update

I have tried solution from https://stackoverflow.com/a/28103608/3081929 But ng-change doesn't work either.

Answer 1

the code looks correct,

before running your codova app on android make sure you have compiled the angular project using angular cli and output should be set to www folder