Not able to achieve recursive stack-view in vmware clarity with angular

Question

I'm using clarity with angular5.

I'm trying to achieve recursive stack view, but somehow stack-view is not considering dynamically generated stack-blocks as children, and hence view is not rendered properly.

<clr-stack-view>
  <ng-container *ngTemplateOutlet="stackBlockTemplate; context: {data: data}"></ng-container>
</clr-stack-view>
<ng-template #stackBlockTemplate let-data="data">
  <clr-stack-block *ngFor="let account of data">
    <clr-stack-content>Test - {{account.childAccounts ? account.childAccounts.length : 0}}</clr-stack-content>
    <ng-container *ngIf="account.childAccounts">
      <ng-container *ngTemplateOutlet="stackBlockTemplate; context: {data: account.childAccounts}"></ng-container>
    </ng-container>
  </clr-stack-block>
</ng-template>

As you can see, I don't get a collapsible icon, because somehow stack-view is not considering dynamically generated stack-block as a child.

Here is StackBlitz url: https://stackblitz.com/edit/clarity-light-theme-v11-9bb9lg