title: Angular - Refresh/Get data after delete
body: <p>I've landed on a project in flight using Angular without knowing too much about Angular. I'm currently working on a simple CRUD screen. After deleting a row, how can I then "refresh" the UI? Here are the methods inside my component:</p>
  
  <pre><code>    AATList:IAat[];
  
  confirmDelete(): void{
      //this.myService.deleteAAT(this.satNumber).subscribe(data =&gt; {this.AATList = data;});
      //this.myService.deleteAAT(this.satNumber).subscribe(() =&gt; {this.getAATtEntries(); });
      this.myService.deleteAAT(this.satNumber).subscribe();
      this.getAatEntries();
      this.modalRef.hide();
  }
  
  getAATtEntries() {
      console.log("entries");
      this.myService.getAATList().subscribe(data =&gt; {this.AATList = data});
  }
  </code></pre>
  
  <p>(Added on edit, inside component):</p>
  
  <pre><code>openDeleteModal(template: TemplateRef&lt;any&gt;, satNumber: number) {
      this.satNumber = satNumber;
      this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
    }
  </code></pre>
  
  <p>Services:</p>
  
  <pre><code>getAATList() {
      return this.httpClient.get&lt;ISmt[]&gt;(environment.ApiEndPoint + '/api/SMTDatas', {withCredentials:true});
  }
  
  deleteAAT(satNumber : number) {
      return this.httpClient.delete(environment.ApiEndPoint + '/api/SMTDatas/' + satNumber, {withCredentials:true} )
  }
  </code></pre>
  
  <p>(I am using the <code>HttpClient</code> from <code>@angular/common/http</code> for the services)</p>
  
  <p>I've tried the first three lines in the confirmDelete method without avail. What am I missing here? My grasp of Angular is not good so feel free to point out anything else.</p>
  
  <p>UPDATE:
  HTML:</p>
  
  <pre><code>    &lt;a class="text-danger" data-toggle="tooltip" data-placement="top" title="Delete" (click)="openDeleteModal(deleteTemplate, smt.SMTNumber)"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;Delete&lt;/a&gt;
  ...
      &lt;ng-template #deleteTemplate&gt;
        &lt;div class="modal-body text-center"&gt;
          &lt;p&gt;Are you sure you want to delete this SAT?&lt;/p&gt;
          &lt;button type="button" class="btn btn-default" (click)="confirmDelete()" &gt;Yes&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary" (click)="denyDelete()" &gt;No&lt;/button&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
  </code></pre>