title: Angular CRUD - Refresh UI after add/update/delete operation
body: <p>I was wondering that it is better to refresh the UI when executing an add/update/delete operation from a CRUD in Angular.</p>
  
  <p>The options are as follows (for example, for delete action):</p>
  
  <p><strong>1.</strong> Update local variable with previously fetched data after perform the action.</p>
  
  <pre><code>deleteProduct(id) {
      this.productsService.deleteProduct(id).subscribe(status =&gt; {
          this.products = this.products.filter(item =&gt; item.id != id);
      });
  }
  </code></pre>
  
  <p><strong>2.</strong> Fetch the items again calling REST API.</p>
  
  <pre><code>deleteProduct(id) {
      this.productsService.deleteProduct(id).subscribe(status =&gt; {
          this.getProducts();
      });
  }
  
  getProducts() {
      this.productsService.getProducts().subscribe(products =&gt; {
          this.products = products;
      });
  }
  </code></pre>
  
  <p>This would also be applicable to add or edit, with more code obviously.</p>
  
  <p>Which option is better in terms of good practices and performance? Updating variable data locally or performing a new http request to obtain updated data.</p>