What are the options for (keyup) in Angular2?

Question

The following works great when the enter key is released. What other options are available for the keyup in addition to keyup.enter?

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

Unorthodox

Maybe this could give you a hint github.com/angular/angular/issues/523, it's quite old though. – Feldman

Answer 1

These are the options currently documented in the tests: ctrl, shift, enter and escape. These are some valid examples of key bindings:

keydown.control.shift.enter
keydown.control.esc

You can track this here while no official docs exist, but they should be out soon.

Semela

Wow, this answer was given when Angular was in its 20th alpha and it still works today. – Downey

Related documentation angular.io/guide/user-input#key-event-filtering-with-keyenter – Committeeman

New link for Angular 9 – Barabbas

This still works today with Angular 12, but it's important to note that order matters for the multi-key combos. keydown.shift.enter works, but keydown.enter.shift does not. – Celeriac

Answer 2

I was searching for a way to bind to multiple key events - specifically, Shift+Enter - but couldn't find any good resources online. But after logging the keydown binding

<textarea (keydown)="onKeydownEvent($event)"></textarea>

I discovered that the keyboard event provided all of the information I needed to detect Shift+Enter. Turns out that $event returns a fairly detailed KeyboardEvent.

onKeydownEvent(event: KeyboardEvent): void {
   if (event.keyCode === 13 && event.shiftKey) {
       // On 'Shift+Enter' do this.......
   }
}

There also flags for the CtrlKey, AltKey, and MetaKey (i.e. Command key on Mac).

No need for the KeyEventsPlugin, JQuery, or a pure JS binding.

Costumer

Answer 3

Have hit the same problem today.

These are poorly documented, an open issue exist.

Some for keyup, like space:

<input (keyup.space)="doSomething()">
<input (keyup.spacebar)="doSomething()">  

Some for keydown
(may work for keyup too):

<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.alt)="...">
<input (keydown.shift.esc)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.f4)="...">

All above are from below links:

https://github.com/angular/angular/issues/18870
https://github.com/angular/angular/issues/8273
https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/key_events.ts
https://alligator.io/angular/binding-keyup-keydown-events/

Melodics

Answer 4

This file give you some more hints, for example, keydown.up doesn't work you need keydown.arrowup:

https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart

Beckybecloud

Answer 5

you can add keyup event like this

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

in Component, code some like below

export class KeyUpComponent_v1 {
  values = '';

  onKey(event:any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

Max

This doesn't work for numbers. The keyup event is not fired if i type number in the input field. What can we do for that ? – Damales

Answer 6

The keyCode is deprecated you can use key property in the KeyboardEvent

<textarea (keydown)=onKeydownEvent($event)></textarea>

Typescript:

onKeydownEvent($event: KeyboardEvent){

    // you can use the following for checking enter key pressed or not
    if ($event.key === 'Enter') {
      console.log($event.key); // Enter
    }


    if ($event.key === 'Enter' && event.shiftKey) {
           //This is 'Shift+Enter' 
    }
}

Craniometer

Answer 7

If your keyup event is outside the CTRL, SHIFT, ENTER and ESC bracket, just use @Md Ayub Ali Sarker's guide. The only keyup pseudo-event mentioned here in angular docs https://angular.io/docs/ts/latest/guide/user-input.html is ENTER key. There are no keyup pseudo-events for number keys and alphabets yet.

Fermata

Sorry, Robert. I had no issues navigating to Angular docs using the link. It works. – Fermata

Yes, it works now. Probably the issue was on my side. Sorry. – Stalker

Answer 8

One like with events

(keydown)="$event.keyCode != 32 ? $event:$event.preventDefault()"

Delarosa

Answer 9

In the app.component.html file Note: Have the form field above table tag

<mat-form-field>
            <input matInput (keyup)="applyFilter($any($event.target).value)" placeholder="Filter">
    </mat-form-field>

In the app.component.ts file

applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

Sain