Angular CDK:Getting error for FlexibleConnectedPositionStrategy in Overlay config

Question

I want to configure an overlay for with overlay.position().flexibleConnectedTo() because connectedTo() is deprecated as per the official docs. Otherwise there is a quesstion having a good answer for connectedTo()

Here is my Code

    const origin:FlexibleConnectedPositionStrategyOrigin=this.RefElem;
    const overlayConfig = new OverlayConfig();
    overlayConfig.positionStrategy = this.overlay.position().flexibleConnectedTo(origin);
    const overlayRef = this.overlay.create(overlayConfig);
    const userProfilePortal = new ComponentPortal(
      GraphMetaSignalSelectorComponent
    );
    overlayRef.attach(userProfilePortal);

but getting this error: "ConnectedToFlexibleConnectedPositionStrategy: At least one position is required. at FlexibleConnectedPositionStrategy.push"

the only time I used Cdk is in this post https://stackoverflow.com/questions/59199540/angular-cdk-attach-overlay-to-a-clicked-element/59272313#59272313, so I think that must be like `positionStrategy=this.overlay.position().flexibleConnectedTo(origin).withPositions(this.getPositions()).withPush(false)` -the function this.getPositions return an array of positions- — Eliseo, Jan 06 '20 at 22:57
Thanks @Eliseo your answer is very helpful to play with Angular CDK — DevLoverUmar, Jan 07 '20 at 06:54

score 12 · Accepted Answer · answered Jul 13 '20 at 17:40

For those curious who stuck with the accepted answer because of the lack of the implementation of this.getPositions(), here's a quick sample for copy-pasting:

const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(origin)
      .withPositions([{
        // here, top-left of the overlay is connected to bottom-left of the origin; 
        // of course, you can change this object or generate it dynamically;
        // moreover, you can specify multiple objects in this array for CDK to find the most suitable option
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top'
      } as ConnectedPosition])
      .withPush(false); // or true, if you want to push the overlay into the screen when it doesn't fit

score 0 · Answer 2 · answered Jun 25 '20 at 18:17

0

It should be like

positionStrategy=this.overlay.position().flexibleConnectedTo(origin)
                 .withPositions(this.getPositions()).withPush(false)

the function this.getPositions() return an array of positions Note: Answer is based on a comment by @Eliseo which solved my problem

answered Jun 25 '20 at 18:17

DevLoverUmar

11,809
11
68
98

1

What is `this` in your context, and how are we supposed to have `this.getPositions()` method implemented? – Alexey Grinko Jul 13 '20 at 17:28
Sorry, It's been 6 months, I left Angular. So, can't recall the whole context. But I think you don't have to implement getPositions method on your own. It's a built-in method that worked for me at that hard time. – DevLoverUmar Jul 13 '20 at 18:30
I guess it returns the position of origin which is the reference for our Overlay Dialog – DevLoverUmar Jul 13 '20 at 18:33

Angular CDK:Getting error for FlexibleConnectedPositionStrategy in Overlay config

2 Answers2