Stop Wiring Keyboard Events in Angular — Model Focus Instead

If you're wiring keyboard events inside Angular components using @HostListener , your architecture is already leaking. You're modelling a global problem as local logic. It might feel clean. keydown . A few conditionals. A call to element.focus() . That approach works until your application grows beyond simple forms. Because keyboard navigation isn’t component logic. It’s application infrastructure. Most Angular applications are solving it at the wrong layer. The problems don’t show up immediately. They appear gradually as your application grows in complexity. As layouts become reusable, state becomes dynamic, and different parts of the UI need to coordinate with one another. Focus starts behaving inconsistently. Keybindings become duplicated. Edge cases multiply. And what once felt simple quietly turns into fragile coordination logic scattered across your components. The Real Problem: Focus Is Global State At its core, the issue is not about arrow keys or event handlers. It’s about sta