Quiero crear componentes angulares para imitar detalles nativos y resumir elementos HTML para que los detalles puedan anidarse dentro de sí mismos a través de la proyección de contenido, pero por alguna razón, angular está creando una copia de elementos anidados renderizados dinámicamente en el componente principal, por lo que aparecen dos listas en la interfaz de usuario. de uno.

aquí está el código de muestra

así que este es el resultado esperado en la carga de la página:

pero este es el resultado real que obtengo del mismo html:

El DetailsComponent está utilizando la proyección de contenido junto con ng-container para renderizar condicionalmente DetailsComponent anidado, SummaryComponent se renderiza estáticamente sin lógica adicional allí, por lo que uno funciona bien, pero DetailsComponent cuando se alterna con su elemento secundario SummaryComponent muestra la lista fuera del DetailsComponent anidado, el DetailsComponent externo no no tiene ninguna lista mencionada en la plantilla y, sin embargo, se representa tanto en el componente principal como en el DetailsComponent , para obtener el resultado esperado, realice estos pasos:

• en la carga de la página, haga clic en el ícono de resumen externo, el DetailsComponent de detalles anidado se ocultará
• luego haga clic en él nuevamente y verá que la lista se muestra solo una vez y en la posición correcta, que es el comportamiento esperado que estoy tratando de lograr.

Entonces, ¿por qué angular lo agrega al lugar equivocado? ¿Está funcionando según lo previsto? ¿que me estoy perdiendo aqui?