I tried to make a table with my nested JSON get from an api. I don't know how to dynamically merge my cells when necessary knowing that my JSON can be nested up to 6 or 7 times.

What I want :
Table I want

What I got :
Table I got

My TS file :

 questionnaire = [
    {
      title : "theme1",
      children : [{
      title : "theme2",
         children : [
         {
           title : "theme3",
           children : []
         },
         {
           title : "theme4",
           children : []
         },
       ]
     }]
   },
   {
     title : "theme5",
     children : [
       {
         title : "theme6",
         children : []
       },
       {
         title : "theme7",
         children : []
       },
     ]
   },
 ]

My component.html :

<ng-container *ngFor="let periode of questionnaire">
    <br>
    <table>
      <tr>
        <td>{{ periode.title }}</td>
        <td *ngFor="let theme of periode.children">
          {{ theme.title }}
        </td>
      </tr>
    </table>
  </ng-container>