Handy key filtering in Angular templates

Learned this one from Minko (opens new window) over at twitter (opens new window).

(keydown.escape)="onEscapeDoSomething()"

Did some quick checks and it seems the listener is scoped to the DOM-level it is introduced. Meaning focus should be on the element that has the event listener or one of its children for it to work.

Super handy for those tiny interaction and accessability behaviour improvements.

And whaddaya know – you can chain keys for key combos 🤗 Thanks to Juliano (opens new window) for pointing that out.

(keydown.control.i)="displayInfo()"