How to delete a section that contain subsection

In my help dialog, a user can create section and subsection. I’m trying to implement a function where a user can delete a section even if that section contains one or multiple subsection.

I can delete a single section if that section doesn’t have any subSection and I can also delete any subsection.

The problem is that I can not delete a section if that section has a subsection.

This is how my Database look like. (one to many relationship)

Id | Name | ParentId (reference to Id ) | Text

  1. BMW (section) | NULL | NULL
  2. How 2 fix bmw | 1 | This is how to fix bmw
  3. fix bmw part 2 | 1 | This is how to fix bmw part 2

TS

mappedSections = [];


  openConfirmDialog(section, isSection: boolean) {
    let dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: {
        isSection
      },
    }
    );
    dialogRef.afterClosed().subscribe((value) => {
      if (!!value) {
        this.delete(section, isSection)
        this.fetchData();
      }
    })
  }


  delete(sec, isSection) {
    if (isSection) {
      this.HelpService.deleteHelp(sec.id).subscribe(() => {
        const index = this.mappedSections.findIndex((value) => value.id == sec.id);
        this.mappedSections = this.mappedSections.filter(section => section.id != sec.id)
        if (~index) {
          this.HelpService.deleteHelp(sec.id).subscribe(() => {
            this.mappedSections = this.mappedSections.filter(subsection => subsection.id != sec.id);
            this.cdRefs.detectChanges()
          })
        }
      })
    } else {
      this.HelpService.deleteHelp(sec.id).subscribe(() => {
        const index = this.mappedSections.findIndex((value) => value.id == sec.parentId);
        if (~index) {
          this.mappedSections[index].subSections = this.mappedSections[index].subSections.filter((subsection) => subsection.id != sec.id)
        }
      })
    }
  }


HTML


                    <div *ngFor="let section of mappedSections">
                        <div style="margin-top: 20px;" *ngIf="section.parentId == null">
                            <p>Section</p>
                            <div>
                                <mat-form-field appearance="fill">
                                    <input matInput type="text" style="width: 200px; height: 15px;"
                                        (ngModelChange)="nameChanged({newValue: $event, isSection: true, id: section.id})"
                                        [(ngModel)]="section.name">
                                </mat-form-field>
                                <button mat-icon-button color="warn" matTooltip="Delete this Section"
                                    style="bottom: 10px;" (click)="openConfirmDialog(section, true)">
                                    <img class="button-icons" src="/assets/images/icons/delete-icon-warn.svg">
                                </button>
                            </div>
                        </div>
                        <div>
                            <div class="substyle" *ngFor="let subSection of mappedSections">
                                <div *ngIf="subSection.parentId == section.id">
                                    <mat-form-field appearance="fill">
                                        <input [disabled] = "subSection.id !== selectedId" matInput style="width: 200px; height: 15px;" type="text"
                                            (ngModelChange)="nameChanged({newValue: $event, isSection: true, id: subSection.id})"
                                            [(ngModel)]="subSection.name">
                                    </mat-form-field>
     
    
                                    <button mat-icon-button color="warn" matTooltip="Delete this Subsection"
                                        style="bottom: 10px;" *ngIf="isSubsection"
                                        (click)="openConfirmDialog(subSection, false)">
                                        <img class="button-icons" src="/assets/images/icons/delete-icon-warn.svg">
                                    </button>
                                </div>
                            </div>


enter image description here

Source: Angular Material Quesions