<input  autocomplete="off" autocapitalize="off" type="text" class="input">
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="origin"
  [cdkConnectedOverlayOpen]="isOpen"
  [cdkConnectedOverlayOffsetY]="12"
  cdkConnectedOverlayHasBackdrop
  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
  (backdropClick)="close()"
  (detach)="close()"
>
<div class="suggestions-container" @dropDown (@dropDown.done)="onPanelAnimationDone($event)">
<app-option  #options  *ngFor="let item of items " [item]="item"></app-option>
  </div>
</ng-template>

 @ViewChildren('options') public options!: QueryList<OptionComponent<T>>;
 @Input() items: any;

 @HostListener('click')
  open() {
    setTimeout(() => {
      this.options.changes.pipe(
        startWith<QueryList<OptionComponent<T>>>(this.options),
        tap(() => this.highlightSelectedOptions()),
        switchMap(options => merge(...options.map((o: OptionComponent<T>) => o.selected))),
        takeUntil(this.unsubscribe$)
      ).subscribe(selectedOption => {
        this.handleSelection(selectedOption)
      });
    })
    this.isOpen = true;
  }

I am completely new to using the Angular CDK Overlay module. I want to create a dynamic searchable select component, and I need to have access to the content of the overlay in my host component.

The only solution I have reached is inside the open method, but I think there might be a better solution.

I would appreciate your help in this regard. I need to have access to options as a QueryList, but the content of the QueryList is empty inside ngAfterViewInit, and only when the overlay is opened does it return the content of the QueryList.