By Alligator
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.
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
.
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)="..."> |
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.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
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!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.