title: Angular, delete a row from html-table by ID
body: <p>This time i need help about how to delete a row based the row ID in html-table when delete button clicked. The table data source is from a separated Json file.</p>
  
  <p>The table looks like this :
  <a href="https://i.imgur.com/E1aeTA8.jpg" rel="nofollow noreferrer">Image Link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
          &lt;table border=1 class="table"&gt;
            &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
            &lt;/tr&gt;
              &lt;tr *ngFor="let d of data | async" [attr.id]="d.id"&gt; &lt;!--each row id == id--&gt;
                  &lt;td&gt;{{ d.id }}&lt;/td&gt;
                  &lt;td&gt;{{ d.name }}&lt;/td&gt;
                  &lt;td&gt;{{ d.email }}&lt;/td&gt;
                  &lt;td&gt;{{ d.age }}&lt;/td&gt;
                  &lt;td&gt;{{ d.phone }}&lt;/td&gt;
                  &lt;button id="remove"&gt;DELETE ROW&lt;/button&gt;
              &lt;/tr&gt;
          &lt;/table&gt; 
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please let me know if more snippets are needed. Thank you.</p>