Рендеринг JSON и массив данных в DOM рекурсивно / любым другим методом - Angular9

Question

Мне нужно динамически перебирать массив объектов, у меня есть вложенный массив и JSON объект вроде этого:

JSON_RESPONSE = {
  nodeOne: 'string',
  nodeTwo: 'Date',
  nodeThree: 'number',
  nodeFour: [
    { elementOne: 'string' },
    { elementTwo: 'number' },
    { elementThree: 'number' },
    {
      elementFour: [
        { elementFive: Date },
        { elementSix: 'number' }
      ]
    }
  ]
};

Импортировал этот JSON в компонент и повторяю это в * компоненте html вот так

<div *ngFor="let res of response | keyvalue : returnZero">
    {{res.key | sentenceCase}} :
    <span *ngIf="isNotArray(res.value); else arrayValues">{{res.value | dataType}}</span>

    <ng-template #arrayValues>
      <app-tree-view [(treeData)]="res.value"></app-tree-view>
      <table>
        <thead>
          <th *ngFor="let key of allKeys(res.value);">
            {{key | sentenceCase}}
          </th>
        </thead>
        <tbody>
          <tr>
            <td *ngFor="let value of allValues(res.value)">
              {{value | dataType}}
            </td>
          </tr>
        </tbody>
      </table>
    </ng-template>
  </div>

Вот мой app.component.ts

export class AppComponent {   
  response = JSON_RESPONSE;

  isNotArray(val) {
    return typeof (val) !== 'object';   }

  allKeys(value) {
    return value.map((a: string) => Object.keys(a)[0]);   }

  allValues(value) {
    return value.map((a: string) => Object.values(a)[0]);   }

  returnZero() {
    return 0;   
  }
}

После повторения этого в HTML я могу напечатать столько же в DOM,

but as I am getting another array(ElementFour), How can I print it outside this td. Just like below image:

Here is the StackBlitz ссылка на то, что пробовали.