如何直接在模板中获取组件的元素引用？

Question

I have certain elements that I set focus to using mouseover as so:

<div #divTemplateVar (mouseover)="divTemplateVar.focus()"></div>

Although this doesn't seem to work for a component:

<component #componentTemplateVar (mouseover)="componentTemplateVar.focus()"></component>

I know I can use a

viewChild('componentTemplateVar', { read: ElementRef }) 

to select the component in the template, but I have many components that need to just focus themselves on mouseover and don't want to manually write a view child and match their id with the a mouseover function.

How can I get component children to auto focus themselves on the mouseover event?

Answer 1

Make a directive : stackblitz

export class HoverFocusDirective {

  constructor(
    private el: ElementRef<HTMLElement>
  ) { }

  @HostListener('mouseover')
  onMouseOver() {
    this.el.nativeElement.focus();
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.el.nativeElement.blur();
  }

}