Как добавить или пробросить событие focus() на кастомный дочерний компонент в Angular?

В Angular есть несколько способов добавления или проброса события focus на кастомный дочерний компонент. Вот некоторые из них:

1. Использование ViewChild:

Сначала нужно получить доступ к дочернему компоненту с помощью ViewChild. В шаблоне родительского компонента определите переменную с помощью директивы ViewChild и укажите тип дочернего компонента:

   import { Component, ViewChild } from '@angular/core';
   import { ChildComponent } from './child.component';

   @Component({
     selector: 'app-parent',
     template: `
       <app-child #childComponent></app-child>
     `
   })
   export class ParentComponent {
     @ViewChild('childComponent') childComponent: ChildComponent;

     // Метод, который вызывается при событии focus на дочернем компоненте
     childComponentFocus() {
       // Ваш код обработки события focus
     }
   }

Теперь вы можете добавить прослушиватель события focus к дочернему компоненту в методе ngOnInit родительского компонента:

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

   @Component({
     selector: 'app-child',
     template: `
       <input (focus)="onFocus()">
     `
   })
   export class ChildComponent implements OnInit {
     ngOnInit() {
       // Добавление прослушивателя события focus
       this.elementRef.nativeElement.addEventListener('focus', () => {
         this.parentComponent.childComponentFocus();
       });
     }

     constructor(private elementRef: ElementRef, private parentComponent: ParentComponent) {}

     // Метод, вызываемый при событии focus на элементе input
     onFocus() {
       // Ваш код обработки события focus на дочернем компоненте
     }
   }

Обратите внимание, что мы использовали ElementRef, чтобы получить доступ к DOM-элементу дочернего компонента, и передали ссылку на родительский компонент через конструктор.

2. Использование EventEmitter в дочернем компоненте:

Создайте EventEmitter в дочернем компоненте и вызовите его при событии focus на элементе input:

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

   @Component({
     selector: 'app-child',
     template: `
       <input (focus)="onFocus()">
     `
   })
   export class ChildComponent {
     @Output() focusEvent: EventEmitter<any> = new EventEmitter();

     onFocus() {
       // Вызов события focus
       this.focusEvent.emit();
     }
   }

Теперь вы можете прослушивать событие focus в родительском компоненте, используя событие focusEvent дочернего компонента:

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

   @Component({
     selector: 'app-parent',
     template: `
       <app-child (focusEvent)="childComponentFocus()"></app-child>
     `
   })
   export class ParentComponent {
     // Метод, который вызывается при событии focus на дочернем компоненте
     childComponentFocus() {
       // Ваш код обработки события focus
     }
   }

В обоих подходах дочерний компонент пробрасывает событие focus в родительский компонент, который затем может обработать его в соответствующем методе.