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