Focus Management

Focus should move logically when UI changes.

TypeScript

import { Component, ViewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-focus",
  standalone: true,
  templateUrl: "./focus.component.html",
})
export class FocusComponent {
  @ViewChild("inputRef") input!: ElementRef<HTMLInputElement>;

  focusInput() {
    this.input.nativeElement.focus();
  }
}

HTML

<input #inputRef type="text" />

<button (click)="focusInput()">Focus Input</button>