How to create tree format form array in angular14?

Always we have a "infinite level" is work to make a "recursive component"

A recursive component is only a component that call itself (see e.g. this SO)

Mannage a child component that mannage a formGroup from parent it's not very easy. We can use viewProviders or pass the FormGroup in an input (see this another SO)

We are going to choose pass the formGroup. But as our component is a recursive component we need in witch formGroup we are, so I use another input that it's the "name" of the formGroup. (remember that our formArrays are formArrays of formGroups. We need "reach" the formGroup

Puff...!

Before we are going to define a function to create the formGroup. We are export it because the same function can be used by the parent and by the component

export function setNestedMenu(data:any=null){
  data=data || {name: "",displayname: "",id: "",nestedMenu: []}
  return new FormGroup({
      name:new FormControl(data.name),
      displayName:new FormControl(data.name),
      id:new FormControl(data.name),
      nestedMenu:new FormArray(data.nestedMenu.map((x:any)=>this.setNestedMenu(x)))
  })
}

NOTE: I use camelCase to give value to the "properties"

The component

@Component({
  selector: 'form-component',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule],
  template: `
  <div [style.margin-left.px]="index*10" *ngIf="formGroup" [formGroup]="formGroup" >
  <div formArrayName="nestedMenu">
     <button (click)="addMenu()">add</button>
     <div *ngFor="let group of menuArray?.controls;let i=index" 
                                          [formGroupName]="i">
       <input formControlName="id"/>
       <input formControlName="name"/>
       <input formControlName="displayName"/>
       <button (click)="removeMenu(i)">remove</button>
       <button (click)="addSubMenu(i)">add submenu</button>
       <ng-container *ngIf="getSubMenuArray(i).length">
         <!--here we call again to our component-->
          <form-component [form]="form" 
                          [name]="name+'.'+i+'.nestedMenu'" 
                          [index]="index+1" ></form-component>
       </ng-container>
     </div>
  </div>
  </div>`,
})
export class FormMenuComponent  {
  _index:number=0;
  formGroup:FormGroup
  @Input() form: FormGroup;
  @Input() name:string="nestedMenu";
  @Input('index') set _(value:number){
    this._index=value;
    this.formGroup=(value?this.form.get(this.name).parent:this.form) as FormGroup
  }

  get index()
  {
    return this._index
  }
  get menuArray() {
    return this.form?this.form.get(this.name) as FormArray:null;
  }
  getSubMenuArray(index:number){
    
    return this.form.get(this.name+'.'+index+'.nestedMenu') as FormArray
  }
  
 addMenu()
 {
   this.menuArray.push(setNestedMenu())
 }
 addSubMenu(index:number)
 {
   this.getSubMenuArray(index).push(setNestedMenu())
 }
 removeMenu(index:number)
 {
  this.menuArray.removeAt(index)
 }
}

See how pass the name, the form and the index variables

Our main.component simply

<form-component [form]="form" [index]="0"></form-component>

form: FormGroup=new FormGroup({
    nestedMenu:new FormArray([setNestedMenu()])
  })

See stackblitz

NOTE: sorry for self quoting