Angular utility directive to be able to access elementRef in template

element.directive.ts

// from: https://twitter.com/Waterplea/status/1270264621534982146
@Directive({
  selector: '[elementRef]',
  exportAs: 'elementRef'
})
export class ElementDirective<T extends Element> extends ElementRef<T> {
  constructor({ nativeElement }: ElementRef<T>) {
    super(nativeElement);
  }
}

sample.component.html

<my-component #ref="elementRef" elementRef></my-component>
<button (click)="ref.nativeElement.focus()">
  Focus element
</button>

Sample:

https://stackblitz.com/edit/element-directive