Angular 2, solve recursion problem with infinity children in nested objects, by showing them as separate divs

page.component.html

<div class="row">
    <ng-template #recursiveList let-yourListName>
      <div class="col-12" *ngFor="let item of yourListName; let i=index;">
        <div class="mystyle" style="text-align: center; " (click)="openDialog(item)">{{item.title}}</div>
        <div class="row" *ngIf="item.children.length > 0">
          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
        </div>
      </div>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: yourListName }"></ng-container>
</div>

page.component.ts

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {
      models = [
        {
          title: '1',
          children: []
        },
        {
          title: '2',
          children: [
            {
              title: '2a',
              children: []
            },
            {
              title: '2b',
              children: [
                {
                  title: '3a',
                  children: []
                },
                {
                  title: '3b',
                  children: []
                },
                {
                  title: '3c',
                  children: [
                    {
                      title: '4a',
                      children: []
                    },
                    {
                      title: '4b',
                      children: []
                    },
                  ]
                },
                {
                  title: '3d',
                  children: [
                    {
                      title: '4a',
                      children: []
                    },
                  ]
                },
              ]
            },
            {
              title: '2c',
              children: [
                {
                  title: '3a',
                  children: [
                    {
                      title: '3b',
                      children: []
                    },
                    {
                      title: '3c',
                      children: []
                    },
                    {
                      title: '3d',
                      children: []
                    },
                    {
                      title: '3e',
                      children: [
                        {
                          title: '4a',
                          children: []
                        },
                      ]
                    },
                  ]
                },
              ]
            },
          ]
        },
      ];
}