Angular CDK Overlay configure overlay position

Question

I am using the Angular CDK to show an element with overlay. My problem is that I want to change the position to be in the top right, but none of the arguments to the connectedTo function is doing this.

@Component({
  template: `
    <button cdk-overlay-origin (click)="openSpaghettiPanel()">
      Pasta 3
    </button>
   `
})
export class AppComponent  {
  @ViewChild(OverlayOrigin) _overlayOrigin: OverlayOrigin;
  constructor(private _overlay: Overlay, 
              public viewContainerRef: ViewContainerRef) {

  }

  openSpaghettiPanel() {
    let strategy = this._overlay.position()
        .connectedTo(
            this._overlayOrigin.elementRef,
   {originX: 'start', originY: 'bottom'},
            {overlayX: 'end', overlayY: 'top'} );
    let config = new OverlayConfig({ width: '100px', height: '100px', positionStrategy: strategy});
    const overlayRef = this._overlay.create(config);
    const userProfilePortal = new ComponentPortal(HelloComponent, this.viewContainerRef);
    overlayRef.attach(userProfilePortal);
  }
}

Which values I need to set in the connectedTo function for this to work?

Answer 1

By looking at Angular Material Tooltip's source code and playing with it, it looks like you can't achieve the "top-right" positioning with only using cdk/overlay's API.

But a simple way to accomplish this is to place you component "above" your origin element using the following snippet and add left margin in it. The margin's value it depends on your use case. Also you don't need to set width and height of your overlay configuration.

// above position
let originPos = {
  originX: 'center',
  originY: 'bottom'
}

let overlayPos = {
  overlayX: 'center',
  overlayY: 'bottom'
}

A useful source on how to use @angular/cdk/overlay is this.