Keyboard navigation support in Angular

Introduction

Keyboard navigation helps users move through your app using only the keyboard. This makes your app easier to use for everyone, especially people who cannot use a mouse.

When building forms that users fill out quickly without a mouse.

When creating menus or dropdowns that users should navigate with arrow keys.

When making interactive lists or tables accessible for keyboard users.

When supporting users with disabilities who rely on keyboard navigation.

When improving overall user experience for faster navigation.

Syntax

Angular

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-keyboard-nav',
  template: `
    <div tabindex="0" (keydown)="onKeydown($event)">
      Press arrow keys to navigate
    </div>
  `
})
export class KeyboardNavComponent {
  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent) {
    switch(event.key) {
      case 'ArrowUp':
        // move focus up
        break;
      case 'ArrowDown':
        // move focus down
        break;
      // add more keys as needed
    }
  }
}

Use tabindex="0" to make elements focusable by keyboard.

Use @HostListener('keydown') to listen for keyboard events in Angular.

Examples

This makes a div focusable and listens for key presses.

Angular

<div tabindex="0" (keydown)="onKeydown($event)">Focusable div</div>

Handles the Enter key press inside a component method.

Angular

onKeydown(event: KeyboardEvent) {
  if(event.key === 'Enter') {
    console.log('Enter pressed');
  }
}

Using HostListener to catch keyboard events globally on the component.

Angular

@HostListener('keydown', ['$event'])
onKeydown(event: KeyboardEvent) {
  if(event.key === 'Tab') {
    // custom tab behavior
  }
}

Sample Program

This component shows a list of items. You can use the up and down arrow keys to move focus between items. The focused item is highlighted with keyboard focus.

Angular

import { Component, ElementRef, ViewChildren, QueryList, AfterViewInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-keyboard-navigation',
  template: `
    <ul>
      <li #items tabindex="0" *ngFor="let item of itemsList; let i = index" [attr.aria-selected]="i === focusedIndex">
        {{item}}
      </li>
    </ul>
  `
})
export class KeyboardNavigationComponent implements AfterViewInit {
  itemsList = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  focusedIndex = 0;

  @ViewChildren('items', {read: ElementRef}) items!: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.focusItem(this.focusedIndex);
  }

  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent) {
    if(event.key === 'ArrowDown') {
      this.focusedIndex = (this.focusedIndex + 1) % this.itemsList.length;
      this.focusItem(this.focusedIndex);
      event.preventDefault();
    } else if(event.key === 'ArrowUp') {
      this.focusedIndex = (this.focusedIndex - 1 + this.itemsList.length) % this.itemsList.length;
      this.focusItem(this.focusedIndex);
      event.preventDefault();
    }
  }

  focusItem(index: number) {
    const element = this.items.toArray()[index].nativeElement as HTMLElement;
    element.focus();
  }
}

Important Notes

Always add tabindex="0" to elements you want keyboard users to focus.

Use event.preventDefault() to stop default scrolling when handling arrow keys.

Use ARIA attributes like aria-selected to improve screen reader support.

Summary

Keyboard navigation lets users move through UI with keys like arrows and tab.

Use tabindex to make elements focusable and @HostListener to handle key events.

Test keyboard navigation to ensure your app is accessible and easy to use.