Angular - access position for overlay of a Material component

Question

I'm facing an issue while working on a custom flyout component which utilizes Overlay CDK. I followed this article and it works fine (after upgrading some deprecated code), just one thing seems a bit off to me.

I have a flyout service, which opens the custom flyout overlay and it calculates the position of the new flyout relative to the parent.

openFlyoutComponent<T>(origin: HTMLElement, content, data): FlyoutRef<T> {
// ...
const overlayConfig = this.getOverlayConfig(origin);
// ...
}

private getOverlayConfig(origin): OverlayConfig {
  return new OverlayConfig({
    //...
    positionStrategy: this.calculatePosition(origin),
  });
}

private calculatePosition(origin): PositionStrategy {
  return this.overlay.position()
    .flexibleConnectedTo(origin)
    .withPositions(...)
    .withPush(false);
}

Since I'm working on a component library I wanted to make things simple and I followed Netanel's way (passing origin directly, without using @ViewChild). But I have an issue when the origin is a MAT componet.

<!-- 
This will open the flyout but the origin is of type MatButton and it won't calculate 
the position correctly. Flyout is shown in the top left corner
-->
<button
  mat-button
  #flyoutRefMat
  (click)="toggleFlyoutComponent(flyoutRefMat)"
>
</button>

<!-- 
This will open the flyout with correct position strategy just bellow the origin button.
Origin is of type NativeElement.
-->
<button
  #flyoutRefNative
  (click)="toggleFlyoutComponent(flyoutRefNative)"
>
</button>

Now, I know I can fix it using @ViewChild('flyoutRefMat', {read: ElementRef}) but this will put 'pressure' on the library users and it would create a need to either have multiple functions or some switches/if-else blocks to open the multiple flyouts from the same component.

Is there a way to pass the Mat Component as the Native Element the way I want to do it? Or am I completely mistaken or I miss something obvious?