I currently have a service that retrieves a list of data and displays it within the app.component.html.
Below is the code snippet used to display the data:
<ul>
<li *ngFor="let data of retrieveData">
{{ data.id }} - {{data.title}} <span><button (click)="delete(data.id)">Delete Record</button></span>
</li>
</ul>
An individual delete button is added to each row of data to trigger a method that removes the data from the server.
While this current setup works, I would like the data to be removed from the view without the page having to be reloaded.
In the app.component.ts file, the method below is used to call the service method:
delete() {
this.apiService.delete(1).subscribe(result => {
console.log(result);
}, error => console.log('There was an error: ', error));
}
What is the best way to ensure the component data is updated without requiring a page reload?