How can I dynamically add wrapper to an Angular component?

In my project I have wrapper classes that are reused often and some contain the 'gap' css property. Now I have a component that loads data asynchronously and that component is hidden if the returned data is empty.

The problem I face is that the wrappers I used to surround my component are still displayed and therefore cause the gap to activate. Below is an example with two wrappers, but depending on the use-cases it could be more or other wrappers that are needed.

At the moment:

Working data:

<card-wrapper>
<specific-margin-wrapper>
<component-loading-data />
</specific-margin-wrapper>
</card-wrapper>


Without data:

<card-wrapper>
<specific-margin-wrapper>
<component-loading-data style="display: none" />
</specific-margin-wrapper>
</card-wrapper>


My goal:

Working data:

<card-wrapper>
<specific-margin-wrapper>
<component-loading-data />
</specific-margin-wrapper>
</card-wrapper>


Without data:

<card-wrapper style="display: none" >
<specific-margin-wrapper style="display: none" >
<component-loading-data style="display: none" />
</specific-margin-wrapper>
</card-wrapper>


I want to "display: none" the wrapper classes when the child-component is not displayed too.

I tried to use css pseudo classes like :empty, but that didn't fully work:

:host:empty {
display: none;
}


Is there a css (less) solution that works like :empty but includes children with display:none ? Or some ngTemplate / ngContent magic that let's me dynamically add wrapper inside my component.

Ideally I want a solution within my "component-loading-data" so that I don't need to change the parent component where I use it

Continue reading...