I would suggest the following

1. Try to avoid nested subscriptions. Instead you could use forkJoin function to trigger both requests in parallel.

fetchData = () => {
  forkJoin(this.HelpService.getHelpSection(), this.HelpService.getHelpSubsection()).subscribe(
    ([sections, subsections]) => {
      this.mapData(sections,subsections);
    },
    err => {
      // handle error
    }
  );
}

deleteSection (sec) {
  forkJoin(this.HelpService.deleteHelpSection(sec), this.HelpService.deleteHelpSubsection(sec.id)).subscribe(
    _ => {
      this.mappedSections = this.mappedSections.filter(section => section.id != sec.id);
    },
    err => {
      // handle error
    }
  );
}

2. Based on the way you’ve initialized the subSections property in the this.mappedSections, I’d guess the subSections need to filtered the following way

deleteSubsection(sec) {
  this.HelpService.deleteHelpSubsection(sec.id).subscribe(
  _ => {
    this.mappedSections = this.mappedSections.map(section => ({ 
      ...section, 
      section.subSections: section.subSections(subSection => subSection.id != sec.id)
    }));
  }),
  err => {
    // handle error 
  }
}

It’s only a guess based on your question. If it doesn’t work please provide more information about the variable this.mappedSections‘s structure.

I have Section and Subsection.

I can remove the section completely(frontend and backend) but I’m not sure why for my Subsection, I can’t remove in the front end. It deleted in the backend but I don’t see anychanges in the frontend when I try to delete the subsection.

Also Any Help or recommendation on how I can combine those two functions will be really appreciated.

<p>Section</p>
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="10px">
<input type="text" (ngModelChange)="sectionNameChanged($event,section)" fxFlex [(ngModel)]="section.sectionName" >
<span class="material-icons" (click)="deleteSection(section)">delete</span>
</div>

<p>Subsection</p>
<div style="margin-left: 20px;" *ngFor="let subsection of section.subSections">
    <input type="text" (ngModelChange)="subsectionNameChanged($event,subsection)" fxFlex [(ngModel)]="subsection.sectionName" >
    <span class="material-icons"(click)="deleteSubsection(subsection)" >delete</span>
</div>

  public mappedSections = [];

 fetchData =  () =>{
    this.HelpService.getHelpSection().subscribe(sections=>{
      this.HelpService.getHelpSubsection().subscribe(subsections=>{
        this.mapData(sections,subsections)

      })
    })
  }

  mapData = (sections,subsections)=>{
    this.mappedSections = sections.map(section=>{
      const sSections = subsections.filter(subsection=> subsection.parentId===section.id);
      if(sSections.length){
        section.subSections = sSections;
      }else{
        section.subSections = [];
      }
      return section;
    })
    console.log('mapped sections',this.mappedSections);
  }

  deleteSection(sec){
    this.HelpService.deleteHelpSection(sec).subscribe(()=>{
      this.HelpService.deleteHelpSubsection(sec.id).subscribe(()=>{
        this.mappedSections = this.mappedSections.filter(section=> section.id!=sec.id);
      })
    })
  }

  deleteSubsection(sec){
      this.HelpService.deleteHelpSubsection(sec.id).subscribe(()=>{
        this.mappedSections = this.mappedSections.filter(subsection=> subsection.id!=sec.id);
      })
  }