Angular CDK Overlay flexibleConnectedTo не подключается к источнику

Я хотел бы подключить наложение angular cdk к кнопке на моей панели инструментов. Вот что у меня получилось:

overlay-button.html:

<button mat-menu-item #overlayButton (click)="showOverlay()"> open </button>

overlay-button.component

export class OverlayButtonComponent {
  @ViewChild('overlayButton') private _button: ElementRef;

  constructor(private _overlay: OverlayService) {}

  showOverlay() {
    this._overlay.open(DisplayedComponent,this._button);
  }
}

overlay.service

export class OverlayService {
  constructor(private _overlay: Overlay) {}

  open(comp: ComponentType<any>, connectedTo:ElementRef) {
    const positionStrategy = this._overlay.position()
      .flexibleConnectedTo(connectedTo)
      .withPositions([{
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
      }]);

    const overlayRef = this._overlay.create({
      hasBackdrop: true,
      positionStrategy,
      scrollStrategy: this._overlay.scrollStrategies.reposition()
    });

    // Create ComponentPortal that can be attached to a PortalHost
    const filePreviewPortal = new ComponentPortal(comp);

    // Attach ComponentPortal to PortalHost
    overlayRef.attach(filePreviewPortal);

    overlayRef.backdropClick().subscribe(() => overlayRef.detach());
  }
}

Проблема в том, что оверлей всегда отображается в верхнем левом углу браузера. Сначала я подумал, что проблема с viewChild, возможно, elementRef не определен или что-то в этом роде, но это не так. Я перепробовал все найденные мной учебники с похожим кодом, и ничего не помогло. Может ли проблема быть где-нибудь еще?

Вот иллюстрация того, как это бывает: