I work with categories, firstly I show the parent categories and if they have children I need to show the children and their children. Currently I did it statically but it caused me problems with the conditions, since if I selected the children the father would be hidden from me, so I would like to make it dynamic since I need to show them nested.

This is the method that is called when clicking on the radiobutton

 onUpdateQueryProperty(queryProperty, value) {
    console.log(this.query[queryProperty], value)
    this.query[queryProperty] = value;
    this.valSelected = value;
    console.log(this.valSelected);
    this.applyQuery();
  }

This is the part of the html where I nest the categories

<li class="my-1" *ngFor="let category of nestedCategories$ | async; let indice = index">
   <p-radioButton 
      id="categ" 
      name="category" 
      [value]="category.id" 
      [(ngModel)]="this.query.categoryId"
      [label]="category.name" 
      (onClick)="onUpdateQueryProperty('categoryId', category.id)">
   </p-radioButton>
   <div *ngIf="category.children">
      <li class="my-1 mx-4" *ngFor="let hijo of category.children">
         <div *ngIf="valSelected == category.id? valSelected == category.id: valSelected == hijo.id">
             <p-radioButton 
                 name="hijo" 
                 [value]="hijo.id" 
                 [(ngModel)]="this.query.categoryId" 
                 [label]="hijo.name"
                 (onClick)="onUpdateQueryProperty('categoryId', hijo.id)">
             </p-radioButton>
         </div>
         <div *ngIf="hijo.children">
             <li class="my-1 mx-4" *ngFor="let doble of hijo.children">
                 <div *ngIf="valSelected == hijo.id? valSelected == hijo.id: valSelected == doble.id">
                     <p-radioButton 
                         name="doble" 
                         [value]="doble.id" 
                         [(ngModel)]="this.query.categoryId" 
                         [label]="doble.name"
                         (onClick)="onUpdateQueryProperty('categoryId', doble.id)">
                     </p-radioButton>
                 </div>
             </li>
         </div>
     </li>
  </div>
</li>