I want to create angular components to mimic native details and summary HTML elements so that details can be nested inside itself through content projection but for some reason angular is creating a copy of dynamically rendered nested elements in parent component so two lists are appearing on UI instead of one.

here's the sample code

so this is the expected result on page load:

but this is the actual result I get from same html:

The DetailsComponent is using content projection along with ng-container to conditionally render nested DetailsComponent, SummaryComponent is rendered statically no extra logic there so that one is working fine but DetailsComponent when toggled by its child SummaryComponent renders the list outside the nested DetailsComponent, outer DetailsComponent doesn't have any list mentioned in template and yet it gets rendered in both parent and child DetailsComponent, to get to the expected result, perform these steps:

• on page load, click outer summary icon, nested DetailsComponent will hide
• then click on it again and you'll see the list getting rendered only once and in correct position which is the expected behavior I'm trying to acheive.

So why is angular adding it to the wrong place? is it working as intended? what am I missing here?