Connecting overlay to dynamic elements

Question

I want to make overlay using angular-cdk that will be attached to dynamically created elements using *ngFor is ti possible?

Here is example: https://stackblitz.com/edit/angular-z4a989 I want to open overlay with every button but overlay should be attached to that that opened overlay. Is it possible?

Answer 1

You can define property in your component:

triggerOrigin: any;

This property will be responsible for cdkConnectedOverlayOrigin input property of your overlay:

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="triggerOrigin" 
                                                              ^^^^^^^^^^^^^

Then create toggle method like:

toggle(trigger: any) {
  this.triggerOrigin = trigger;
  this.isOpen = !this.isOpen
}

It takes trigger instance as parameter. We will pass it from template depending on clicked button:

<button class="btn btn-primary" cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="toggle(trigger)">Open overlay</button>
...
<div style="margin-top:100px">
  <button *ngFor="let btn of btns" cdkOverlayOrigin #trigger="cdkOverlayOrigin"
   (click)="toggle(trigger)">{{btn}}</button>
</div>

Completed example could be found on Forked Stackblitz Example