typescript 70 lines · 9 steps

A keyboard shortcut directive in Angular

A standalone attribute directive listens for global keystrokes and emits an event when a configured combo matches.

Explained by highlit

Angular Intermediate directives event-handling keyboard-shortcuts input-parsing declarative-config

1import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
2 
3interface Shortcut {
key: string;
ctrl?: boolean;
shift?: boolean;
alt?: boolean;
meta?: boolean;
9}
10 
11@Directive({
selector: '[appKeyboardShortcut]',
standalone: true,
14})
15export class KeyboardShortcutDirective {
@Input('appKeyboardShortcut') shortcut!: Shortcut | string;
@Input() allowInInputs = false;
@Output() triggered = new EventEmitter<KeyboardEvent>();
19 
@HostListener('document:keydown', ['$event'])
onKeyDown(event: KeyboardEvent): void {
  if (!this.allowInInputs && this.isEditableTarget(event.target)) {
    return;
  }
25 
  if (!this.matches(event)) {
    return;
  }
29 
  event.preventDefault();
  event.stopPropagation();
  this.triggered.emit(event);
}
34 
private matches(event: KeyboardEvent): boolean {
  const spec = this.normalize(this.shortcut);
  return (
    event.key.toLowerCase() === spec.key.toLowerCase() &&
    event.ctrlKey === !!spec.ctrl &&
    event.shiftKey === !!spec.shift &&
    event.altKey === !!spec.alt &&
    event.metaKey === !!spec.meta
  );
}
45 
private normalize(shortcut: Shortcut | string): Shortcut {
  if (typeof shortcut !== 'string') {
    return shortcut;
  }
50 
  const parts = shortcut.toLowerCase().split('+').map((p) => p.trim());
  const key = parts.pop() ?? '';
  return {
    key,
    ctrl: parts.includes('ctrl'),
    shift: parts.includes('shift'),
    alt: parts.includes('alt'),
    meta: parts.includes('meta') || parts.includes('cmd'),
  };
}
61 
private isEditableTarget(target: EventTarget | null): boolean {
  const el = target as HTMLElement | null;
  if (!el) {
    return false;
  }
  const tag = el.tagName;
  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
}
70}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Directives can bind to document-level events with HostListener to capture input anywhere on the page.
2Accepting either a string or an object and normalizing it internally gives callers a flexible, forgiving API.
3Guarding against editable targets prevents shortcuts from hijacking normal typing in forms.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';