Get which key pressed from (keypress) angular2

JavascriptAngular

Javascript Problem Overview


Is it possible to find out which key was pressed when using (keypress) in Angular 2?

E.g.

<input type=text (keypress)=eventHandler()/>

public eventHandler() {
    //Some code
    console.log(keyPressed);
}

Edit: Seems my naming conventions were a bit off. I did not mean AngularJS 2, I meant Angular 2.0 with typescript.

Javascript Solutions


Solution 1 - Javascript

Pass $event to your event handler. The $event is a DOM KeyboardEvent.

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
} 

If you know which KeyboardEvent property you want, you can pass that into your event handler:

<input type=text (keypress)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}

Solution 2 - Javascript

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}

Or use like this..

 <input #box (keyup.enter)="onSubmit(form.value)">
 <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

Solution 3 - Javascript

Based on the comment made on the answer:

> this does not detect all events. for example not arrow keys or escape. but you can use (keydown) to get all of them.

The best solution to get all events both backspace and delete or whatever key, just use (input)

<input type=text (input)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}

Solution 4 - Javascript

2020 Update:

event.keyCode is deprecated and you should use event.code instead (just check for browser compatibility first)

<input type=text (keypress)="eventHandler($event)">

eventHandler(event: KeyboardEvent) {
   console.log('Key pressed is:', event.code);
}

Deprecation of event.keyCode:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

event.code browser compatibility:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code#Browser_compatibility

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTheFishermanView Question on Stackoverflow
Solution 1 - JavascriptMark RajcokView Answer on Stackoverflow
Solution 2 - JavascriptClayton K. N. PassosView Answer on Stackoverflow
Solution 3 - JavascriptEmeka ObianomView Answer on Stackoverflow
Solution 4 - Javascriptben marderView Answer on Stackoverflow