Positioning cdk Overlay at mouse position - angular-material

Question

I try to position the overlay with the top right corner at the mouse position. To visualize it, I will show you a graphic how it should be and what I got.
So to position the overlay with the top right corner at the mouse position, the width of overlay has to be subtracted from the event.clientX value (see below). BUT the total width has to be dynamically, depending on how wide the content in the overlay will be. That could differ over time. So How to get the exact value of the width of the overlay and position it afterwards?
Button to open the Overlay:
<button (click)="showTasks($event)"></button>
Method which is called:
export class Component {
constructor(private _tasksOverlay: OverlayService) {}
showTasks(event) {
this._tasksOverlay.open(OverlayComponent,event);
}
}
OverlayService:
#Injectable()
export class ServerTaskOverlayService {
private _config = new OverlayConfig({});
constructor(private overlay: Overlay) {}
open(comp:ComponentType<any>,event:MouseEvent) {
// Here the width of the overlay should already be known
this._config.positionStrategy = this.overlay.position().global().left(event.clientX+"px").top(event.clientY+"px");
const overlayRef = this.overlay.create(this._config);
const filePreviewPortal = new ComponentPortal(comp);
overlayRef.attach(filePreviewPortal);
}
}

Answer 1

try to create overlay with PositionStrategy and then change left value.
For example:
this.overlayRef = this.overlay.create({
positionStrategy: this.positionStrategy
});
this.overlayRef.attach(new TemplatePortal(this.templateRef, this.viewContainerRef));
this.positionStrategy.left(`${event.clientX - element width}px`);
this.positionStrategy.apply();

Answer 2

After many attempts, I realized that the bottom-left corner is the (0,0) axis-point and the y-axis should have a negative value (don't know why), so the code that worked for me is:
const positionStrategy = this.overlay.position().global().left(event.clientX+"px")
.top((-1 * (window.innerHeight - event.clientY))+"px");
this.overlayRef = this.overlay.create({
positionStrategy
});