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

Safekeeping

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));

Maressa

It's not good enough, if the overlay gets pushed from its side, the origin might be off, so calculation is not correct. – Zolner

Answer 2

You can use "panelClass" as below:

return new OverlayConfig({
  hasBackdrop: true,
  positionStrategy: this.overlay.position()
    .flexibleConnectedTo(new ElementRef(mouseEvent.target))
    .withFlexibleDimensions(false)
    .withPositions([
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'top',
        panelClass: 'top' <--
      },
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'bottom',
        panelClass: 'bottom' <--
      }
    ])
})

Weapon