Rendering recursive HTML using ngTemplateOutlet in Angular

I have a project that will need to recursively render HTML on to a page. To do this, I am storing the format of the HTML in a nested object array. Given the consideration that HTML is an assortment of nested rows and columns, an example of something I'd need to render would look like this:

This layout correlates to the data I receive from the database (where size is the width a column spans its parent row and blocks are divs that contain content inside a column):

var response = [
  {
    "uid": "a",
    "order": 0,
    "layout": {
      "rows": [
        {
          "uid": "qz",
          "columns": [
            {
              "uid": "ugjm",
              "size": 6,
              "blocks": [ // NOTE: BLOCK WITH A COLUMN AS PARENT
                {
                  "uid": "bh",
                  "data": {
                    "content": "row qz, column ugjm, block bh"
                  },
                  "type": 2,
                  "order": 0
                }
              ]
            },
            {
              "uid": "plm",
              "size": 6,
              "rows": [ // NOTE: ROW WITH A COLUMN AS PARENT
                {
                  "uid": "bzx",
                  "columns": [
                    {
                      "uid": "1cd",
                      "size":  6,
                      "blocks": [
                        {
                          "uid": "nbv",
                          "data": {
                            "content": "row qz, row bzx, column 1cd, block nbv"
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
      ],
      "columns": 12
    },
  }
]

I found a great article about rendering recursive data using ngTemplateOutlet. Link: https://trungk18.com/experience/angular-recursive-view-render/ but it appears to rely on the nested model being an exact match to the parent, and as you can see in the image above, columns can either contain rows OR blocks.

For example, in my data one possible path to a content block could be:

row -> column -> block -> content

or it could be nested further:

row -> column -> row -> column -> block -> content

so I'm not quite sure how to account for this in my recursive method to display the HTML on the page. The article I linked uses ngTemplateOutlet and I figured this would be a good way to start, but I'm not sure how to utilize this to account for unknown nesting depths!

<ul>
  <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: list }"></ng-container>
</ul>

<ng-template #recursiveListTmpl let-list>
  <li *ngFor="let item of list">
     {{ item.title }} 
    <ul *ngIf="item.children.length > 0">
      <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: item.children }"></ng-container>
    </ul>
  </li>
</ng-template>

Thanks!