Angular HTTP delete request, app updating question

Question

Link to stackblitz editor: https://stackblitz.com/edit/github-krcuye

Link to API needed to have full test functionality: https://github.com/TSPeterson206/conspiracyAPI

API uses knex and seeds would need to be run via: npm run knex seed:run...due to items being deleted onclick.

I am attempting to use an HTTP delete request to remove an item out of an array and then make an HTTP get request to grab the now changed array for continued use in the app. I can delete the item and it appears to leave the database. The element will disappear and I can use postman to see that it is gone. The app doesn't seem to reflect the absence until it is reloaded. I call another function within the function that is used to delete and this deleted item shows as present (toggleData). I need the app to update in real-time as I display {{allNouns.length}} in the splash page. I am using the httpClientModule and tap/concatMap. I have toyed around with async/await and setTimeout but so far no luck. Any information on order of operations or how to best seeing realtime results would be much appreciated.

Just for context. this.userNounsHolder is an array of objects used for a dashboard that allows the deletion. this.allNouns is an array of strings that are displayed in the main page. 3 checkboxes (handled by toggleData) determine what strings are in the array. A bunch of HTTP calls are made in ngOninit, but those are handling generation fine and seem unrelated to this particular issue. Thank you for the sets of eyes.

At present I am just trying to get this work for nouns. Click on modal to see the dashboard in question.

FUNCTION USED TO DELETE

delete(idNum){this.http.delete(`http://localhost:8000/nouns/${idNum}`).pipe(
  concatMap(user => this.http.get(`http://localhost:8000/nouns/${this.user[0].id}`)),
  tap(result => this.userNounsHolder = result)).subscribe(
    this.userNouns = this.userNounsHolder.map(noun => noun.content)
  )
  // console.log('usernouns',this.userNouns, this.allNouns)
  this.toggleData('nouns')
}

HTML containing delete function

<jw-modal id="custom-modal-1">
  <div id="dashboardTop">
  <h1 class="modalHeader" style="height:100px">Nouns Dashboard</h1>
  <button class="modalClose" (click)="closeModal('custom-modal-1');">X</button>
</div>
<div *ngFor="let noun of userNounsHolder" class="modalLoop">
  <div class="nounLoop">{{noun.content}}</div>
  <button (click)="delete(noun.id)">X</button>
</div>
</jw-modal>

TS of toggleData function

toggleData(value) {
if(value==='nouns'){
  console.log('hitting toggledata nouns before', this.userNouns);
    let nounpre=[];
    let nounuser=[];
    let nounalluser=[];

    this.nounBooleans[0] ? nounpre = this.stockNouns:null;
    this.nounBooleans[1] ? nounuser = this.userNouns:null;
    this.nounBooleans[2] ? nounalluser = this.onlyUserNouns : null;
    this.allNouns = nounpre.concat(nounuser).concat(nounalluser);
    console.log('hitting toggledata nouns after', this.userNouns);

}

if(value==='verbs'){
  console.log('hitting toggledata verbs');

  let verbpre=[];
  let verbuser=[];
  let verballuser=[];

  this.verbBooleans[0] ? verbpre = this.stockVerbs:null;
  this.verbBooleans[1] ? verbuser = this.userActions:null;
  this.verbBooleans[2] ? verballuser = this.onlyUserVerbs : null;
  this.allVerbs = verbpre.concat(verbuser).concat(verballuser);
}

if(value==='descriptors'){
  console.log('hitting toggledata descriptors');

  let descriptorpre=[];
  let descriptoruser=[];
  let descriptoralluser=[];

  this.descriptorBooleans[0] ? descriptorpre = this.stockDescriptors:null;
  this.descriptorBooleans[1] ? descriptoruser = this.userDescriptors:null;
  this.descriptorBooleans[2] ? descriptoralluser = this.onlyUserDescriptors : null;
  this.allDescriptors = descriptorpre.concat(descriptoruser).concat(descriptoralluser);
}


  }

Answer 1

Figured it out. Required a different approach. Used async/await and toPromise() and it works as intended. Learned some stuff abouot promises and angular and stackblitz in the mean time though. code used is below:

async delete(idNum,type){
await this.http.delete(`http://localhost:8000/${type}/${idNum}`).toPromise()
if(type==='nouns'){
this.userNouns= await 
this.http.get(`http://localhost:8000/${type}/${this.user[0].id}`).toPromise()
this.userNounsHolder=this.userNouns;
this.userNouns=this.userNouns.map(ele=>ele.content);
}
}