1. Подход на основе шаблонов:

   • Используйте атрибут autofocusв шаблоне HTML для нужного элемента. Например: .

2. Подход с использованием реактивных форм:

   • В классе компонента используйте декоратор @ViewChild, чтобы получить ссылку на нужный элемент.
   • В хуке жизненного цикла ngAfterViewInitиспользуйте метод focus()для ссылки на элемент. Например:

     import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';
     // ...
     @ViewChild('myInput') myInput: ElementRef;
     ngAfterViewInit() {
     this.myInput.nativeElement.focus();
     }

     В приведенном выше примере myInput— это ссылочная переменная шаблона, назначенная элементу ввода в шаблоне.

3. Директивный подход:

   • Создайте специальную директиву, устанавливающую фокус на элементе.
   • Используйте класс Renderer2для программного применения фокуса. Например:

     import { Directive, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
     @Directive({
     selector: '[appAutofocus]'
     })
     export class AutofocusDirective implements AfterViewInit {
     constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
     ngAfterViewInit() {
      this.renderer.selectRootElement(this.elementRef.nativeElement).focus();
     }
     }

     В шаблоне добавьте директиву к нужному элементу: .

Эти методы позволяют вам реализовать автофокусировку в Angular, предоставляя различные подходы в зависимости от вашего конкретного варианта использования.