How to Access an Ancestor-Components ElementRef inside a Component/Directive

Question

I want to access the ElementRef of an ancestor component
(which is not controlled by me; means I cannot simply expose the desired object on it).

So basically I could inject the Component itself and then use the functionality of the render3#getHostElement function (returns the ElementRef of a given Component Instance but unfortunately it is not exported from the @angular/core package).

<mat-form-field>                  <!-- the elRef of this one; but is potentially not a direct ancestor -->
  <div>                           <!-- potentially some other elements in between -->
    <my-component></my-component>
  </div>
</mat-form-field>

@Component({...})
class MyComponent {
  constructor(formField: MatFormField) {
   const elRefOfFormField = getHostElement(formField) // basically what I need
  }
}

So is there a 'clean' way to receive this HostElement?

• imho it should be sth analogous to how I can access a children ElementRef of a component @ViewChild(MatFormField, {read: ElementRef})

It's not an option to do something like elementRef.nativeElement.closest('mat-form-field') (sometimes there are multiple options how to use a component/directive).