title: Angular 6 - Delete data from app.component.html and updating changes on view
body: <p>I have a service which is getting a list of data and displating it on the app.component.html</p>
  
  <p>This is the code for displaying the data:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let data of retrieveData"&gt; 
          {{ data.id }} - {{data.title}} &lt;span&gt;&lt;button (click)="delete(data.id)"&gt;Delete Record&lt;/button&gt;&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see I've added a delete button for each row of data which then calls a method to delete the data from the server.</p>
  
  <p>This works but at the same time I need this data removed from the view without having to reload the page</p>
  
  <p>On the app.component.ts I have this method which then called the service method:</p>
  
  <pre><code>delete() {
      this.apiService.delete(1).subscribe(result =&gt; {
        console.log(result);
      }, error =&gt; console.log('There was an error: ', error));
  }
  </code></pre>
  
  <p>How can I get the component data updated without reloading the page?</p>