Попытка сделать дочерние узлы jqxDocking более модульными, разбив их по компонентам, но он видит компонент, а не div

Question

Достаточно простая концепция. Сначала я создал компонент, который имеет заголовок и содержимое div. Однако кажется, что проблема заключается в том, что, когда я пытаюсь добавить его в компонент jqxDocking в качестве дочернего элемента, происходит сбой.

Я пытался преобразовать это, например:

<jqxDocking
        (onDragStart)="onDragStart($event)"
        [orientation]="horizontal"
        [width]='800'
        [mode]="docked">
   <div>
       <div id="window1" style="height: 220px;">
           <div>
               Date and Time
           </div>
           <div style="overflow: hidden;">
               Content of the "Date and Time" section
           </div>
       </div>
       <div id="window2" style="height: 220px">
           <div>
               News
           </div>
           <div style="overflow: hidden;">
               Content of the "News" section
           </div>
       </div>
   </div>
</jqxDocking>`

Источник: https://www.jqwidgets.com/angular-components-documentation/documentation/jqxdocking/angular-docking-getting-started.htm?search=

И я надеялся превратить это во что-то более чистое:

<jqxDocking>
    <docked-widget></docked-widget>
</jqxDocking>

Я в значительной степени сбросил содержимое в новом компоновке, который делал я, и реализовал его как таковой, но заметил, что он не отображался правильно на экране. Я проверил, что он работал правильно, и заметил, что если я абстрагирую уровень, добавлю что-то похожее на следующее:

<div><docked-widget></docked-widget></div>

Это по крайней мере настроило аспект стыковки этого. Он просто не имел ни малейшего представления о том, каким будет заголовок и т. Д. Заголовок существует в моем компоненте.

и поэтому я подумал, что я мог бы кое-что расширить, чтобы сделать мой компонент соответствующим образом распознанным и обработанным. Я не видел ничего, что помогло, и я даже не уверен, возможно ли это.