Get active position on angular cdk overlay?

Question

Is there a way to get in the attached component to an overlay the active position ? For exaple I say to a tooltip to open above but this cannot be done and the overlay will open it below. I want to add an arrow pointing to my element from the tooltip and I need to now if the overlay is above/below the element to position the arrow correctly

Answer 1

ConnectedPositionStrategy (deprecated) has onPositionChange property and FlexibleConnectedPositionStrategy has positionChanges property, we can not subscribe to this observables before the overlay is created, so, the solution is to subscribe after overlay is created:

const positionStrategy = this.overlay
        .position()
        .flexibleConnectedTo(this.selectHeader)
        .withPositions([
         {
            originX: 'start',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
          },
          {
            originX: 'start',
            originY: 'top',
            overlayX: 'start',
            overlayY: 'bottom',
          },
        ]);
    this.panelOverlay = this.overlay.create({positionStrategy});
    positionStrategy.positionChanges.subscribe(pos => console.log(pos));