// Tutorial //

How To Bind Specific Keys to the Keyup and Keydown Events in Angular

Published on May 1, 2017 · Updated on January 11, 2021
Default avatar

By Alligator.io

How To Bind Specific Keys to the Keyup and Keydown Events in Angular

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Introduction

When binding to either the keyup or keydown events in your Angular 2+ templates, you can specify key names. This will apply a filter to be applied to the event, so it will trigger only when specific keys are pressed.

In this article, you will learn how to use key names when listening for keyup and keydown events.

Using Key Names

First, let’s look at an example without using a key name.

Let’s say we have an <input> element for users to provide information. We want to log to the console when the user presses the ENTER key:

<input (keydown)="onKeydown($event)">

We have bound a keydown event handler that fires onKeydown():

Next, let’s write the onKeydown() function to handle pressing the ENTER key:

onKeydown(event) {
  if (event.key === "Enter") {
    console.log(event);
  }
}

A check is performed on every keydown event to determine if the event.key value is Enter. If true, we log the event to the console.

Now the same example, but with the addition of the ENTER key name to the event:

<input (keydown.enter)="onKeydown($event)">

We have bound a keydown.enter pseudo-event handler that fires onKeydown():

Next, let’s rewrite the onKeydown() function:

onKeydown(event) {
  console.log(event);
}

By relying upon Angular’s keydown.enter pseudo-event, it is no longer necessary to manually check to see if the event.key value is Enter.

Using Special Modifier Keys and Combinations

This feature works for special and modifier keys like ENTER, escape (ESC), SHIFT, ALT, TAB, BACKSPACE, and command (meta):

Key(s) Key Name
ENTER <input (keydown.enter)="...">
ESC <input (keydown.esc)="...">
ALT <input (keydown.alt)="...">
TAB <input (keydown.tab)="...">
BACKSPACE <input (keydown.backspace)="...">
CONTROL <input (keydown.control)="...">
COMMAND <input (keydown.meta)="...">

But it also works for letters, numbers, arrows, and functional keys (F1 through F12):

Key(s) Key Name
A <input (keydown.a)="...">
9 <input (keydown.9)="...">
ARROWUP <input (keydown.arrowup)="...">
F4 <input (keydown.f4)="...">

Here is a complete list of Key Values that Angular is capable of filtering.

You can also combine keys together to trigger the event only when the key combination is triggered. In the following example, the event will trigger only if the CONTROL and 1 keys are pressed at the same time:

<input (keyup.control.1)="onKeydown($event)">

Here are a few more examples to give you an idea of what’s possible:

Key(s) Key Name
SHIFT+ESC <input (keydown.shift.esc)="...">
SHIFT+ARROWDOWN <input (keydown.shift.arrowdown)="...">
SHIFT+CONTROL+Z <input (keydown.shift.control.z)="...">

Conclusion

You have learned how Angular 2+ templates support filtering key names with keyup and keydown pseudo-events.

The benefits of this approach include less repetitive manual checks for key values and handling modifier key and non-modifier key combinations.

If you’d like to learn more about Angular, check out our Angular topic page for exercises and programming projects.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Thanks, that’s helpful!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel
Get started for free

Enter your email to get $200 in credit for your first 60 days with DigitalOcean.

New accounts only. By submitting your email you agree to our Privacy Policy.