I'm trying to create a custom select dropdown component that can be easily implemented by other devs in the following way:

<ui-select placeholder="select an option" label="Select">
  <ui-select-option *ngFor="let option of options" [id]="option">
    <!-- any custom content to display for the option -->
  </ui-select-option>
</ui-select>

I am using @ContentChildren along with ngTemplateOutlet to project each option into the options list (this allows me to wrap each option in a list item which can handle click events/selected css state etc.).

This is all working fine, however when I select an option, I want the template from the selected option to populate in the select input box. When I do this, the option magically disappears from the list.

I've created a minimal reproduction on stackblitz (https://stackblitz.com/edit/angular-ackvfp).

I've found a way that works with structural directives (https://stackblitz.com/edit/templateref-to-multiple-outlets), however I was hoping to avoid this, since to loop a bunch of options and render them would require an additional ng-container for the loop, since only one directive can exist on each component (would end up looking like the below):

<ui-select placeholder="select an option" label="Select">
  <ng-container *ngFor="let option of options">
    <ui-select-option *myValue="option">
      <!-- any custom content to display for the option -->
    </ui-select-option>
  </ng-container>
</ui-select>