基于宽度的角度分割ng含量

Question

我有一个带有元素列表的组件，我想根据组件的宽度将内容分为两部分。

组件X：

<app-x>
  <div (click)="click1()">Hi</div>
  <div (click)="click2()">my</div>
  <div (click)="click3()">name</div>
  <div (click)="click4()">is</div>
  <div (click)="click5()">Charles!</div>
  <div (click)="click6()">Yes</div>
</app-x>

在app-x的模板中：

<div class="x">
  <div class="left">
    <ng-content></ng-content>
  </div>
  <div class="right">
    <ng-content select="{{left}}"></ng-content>
  </div>
</div>

在app-x组件中，我将使孩子得到ContentChildren或类似的东西，因此我可以计算每个孩子的宽度，以确定哪个孩子进入哪个部分。之后，如何添加两个元素列表，以便它们每个都可以保留其输出，输入和内容？

谢谢