Angular组件异步加载无数据时如何隐藏所有外层包装器，或如何在组件内动态添加包装器？

我在项目里频繁复用一些包装组件，其中部分带有gap CSS属性。现在有个异步加载数据的组件，当返回数据为空时会被隐藏，但问题在于包裹它的外层包装组件依然会显示，导致gap属性生效（产生多余间距）。下面是示例，这里用了两层包装，但实际场景中可能会有更多或不同的包装组件。

当前现状： #

有数据时的结构：

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

无数据时的结构：

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

我的目标： #

有数据时的结构：

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

无数据时的结构：

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

我希望当子组件（component-loading-data）被隐藏时，所有外层包装组件也能被设置为display: none。

我尝试过用:empty这类CSS伪类，但效果不理想：

:host:empty {
  display: none;
}

有没有类似:empty但会把display: none的子元素也视为“空”的CSS（或Less）解决方案？或者有没有Angular的ngTemplate/ngContent技巧，能让我在component-loading-data组件内部动态添加包装器？

理想情况下，我希望解决方案只需要修改component-loading-data组件本身，不用改动使用它的父组件。

补充：已添加StackBlitz示例来演示该问题。

备注：内容来源于stack exchange，提问作者Stampler