Nested components in dynamic template not rendered

[Igneous01]

This is my html - in the first section I have a container component and a child container component nested inside (container component has <ng-content> inside it's html). So it renders some simple text and the child renders a list of items.

<div style="background-color: #888">
  <h1>STATIC TEMPLATE DEFINITION</h1>
  <app-my-container>
    <app-my-child-container [items]="['A', 'B', 'C']" [text]="'TEST'"></app-my-child-container>
  </app-my-container>
</div>

<div style="background-color: #CCC">
  <h1>DYNAMIC TEMPLATE FROM MANUAL HTTP GET</h1>
  <dynamic-html [content]="template" *ngIf="STATE == 1"></dynamic-html>
</div>

However in the second example, the dynamic template only loads the <app-my-container> component, and none of it's children. The data inside template looks like so:

<app-my-container>
  <app-my-child-container [items]="['Apples', 'Bananas', 'Charlies', 'Deltas']" [text]="'2512'"></app-my-child-container>
</app-my-container>

Is there anyway to get nested components to load within a dynamic template? I am using latest angular 6.