Estoy tratando de crear un componente desplegable de selección personalizado que otros desarrolladores puedan implementar fácilmente de la siguiente manera:

 <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>

Estoy usando @ContentChildren junto con ngTemplateOutlet para proyectar cada opción en la lista de opciones (esto me permite envolver cada opción en un elemento de la lista que puede manejar eventos de clic/estado css seleccionado, etc.).

Todo esto funciona bien, sin embargo, cuando selecciono una opción, quiero que la plantilla de la opción seleccionada se complete en el cuadro de entrada de selección. Cuando hago esto, la opción desaparece mágicamente de la lista.

Creé una reproducción mínima en stackblitz ( https://stackblitz.com/edit/angular-ackvfp ).

Encontré una forma que funciona con directivas estructurales ( https://stackblitz.com/edit/templateref-to-multiple-outlets ), sin embargo, esperaba evitar esto, ya que hacer un bucle de un montón de opciones y representarlas sería requiere un contenedor ng adicional para el bucle, ya que solo puede existir una directiva en cada componente (terminaría luciendo como la siguiente):

 <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>