Using keyboard input to login in Angular

Question

I have a button, when clicked goes to the next route/page in Angular. Is there a way we can use the same button but instead of clicking it sometimes give the user to enter a secret passphrase on the keyboard to navigate to the next page. Example: if a user types "nextpage" he should go to the next page.

Here is the working stackblitz code for page routing

HTML:

<button (click)=goToNextPage()>Click me or type the passphrase</button>

TS:

goToNextPage() {
    this.router.navigate(['/newPage'], { skipLocationChange: true });
  }

Adrian Brand · Accepted Answer · 2019-12-09 21:28:22Z

1

constructor() {
  document.addEventListener('keyup', this.addkey);
}

typed = '';

addkey = event =>  {
  this.typed += String.fromCharCode(event.keyCode);
  if (this.typed.endsWith('NEXTPAGE')) {
    this.goToNextPage();
  }
};

ngOnDestroy() {
  document.removeEventListener('keyup', this.addkey);
}

https://stackblitz.com/edit/us-keyboard-to-go-7kmsl7?file=src/app/checkin/checkin.component.ts

You could put in a test for backspace to remove the last character if you want.

edited Dec 9, 2019 at 21:28

answered Dec 9, 2019 at 21:21

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using keyboard input to login in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related