typescript 54 lines · 9 steps

Building a focus-trap directive in Angular

An Angular attribute directive that keeps keyboard focus inside a host element, ideal for modals and dialogs.

Explained by highlit

Angular Intermediate accessibility focus-management dom keyboard-navigation directives

1import { Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
2 
3@Directive({
selector: '[appTrapFocus]',
standalone: true,
6})
7export class TrapFocusDirective implements OnInit, OnDestroy {
@Input('appTrapFocus') enabled = true;
9 
private previouslyFocused: HTMLElement | null = null;
private readonly focusableSelector =
  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
13 
constructor(private readonly host: ElementRef<HTMLElement>) {}
15 
ngOnInit(): void {
  if (!this.enabled) return;
  this.previouslyFocused = document.activeElement as HTMLElement | null;
  queueMicrotask(() => this.getFocusable()[0]?.focus());
}
21 
ngOnDestroy(): void {
  this.previouslyFocused?.focus();
}
25 
@HostListener('keydown', ['$event'])
onKeydown(event: KeyboardEvent): void {
  if (!this.enabled || event.key !== 'Tab') return;
29 
  const focusable = this.getFocusable();
  if (focusable.length === 0) {
    event.preventDefault();
    return;
  }
35 
  const first = focusable[0];
  const last = focusable[focusable.length - 1];
  const active = document.activeElement;
39 
  if (event.shiftKey && active === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && active === last) {
    event.preventDefault();
    first.focus();
  }
}
48 
private getFocusable(): HTMLElement[] {
  return Array.from(
    this.host.nativeElement.querySelectorAll<HTMLElement>(this.focusableSelector),
  ).filter((el) => el.offsetParent !== null);
}
54}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A focus trap works by intercepting Tab and wrapping focus from the last element back to the first and vice versa.
2Restoring the previously focused element on teardown preserves the user's place after a dialog closes.
3Querying focusable elements live keeps the trap correct even as the DOM inside the host changes.

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';