title: Refreshing datatables.net table data in Angular 7 keeps a copy of the old data from table's first loading
body: <p>I'm trying to make a live reporting from a REST API request using the datatables.net library in Angular 7. If I make a data update into the database, the data in the table is updated. However, If I touch the table (i.e. reorder, search for something, change the page, etc), on data reloading (which occurs every 5 seconds), in the table is added the data from the first load of the table. If I touch the table again, the updated data disappears, and only the old data remains, until the next data update, when the new data is added again in the table.</p>
  
  <p>This is the state of the table when the page loads
  <a href="https://i.stack.imgur.com/5C0tP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5C0tP.png" alt="State of the table on page load"></a></p>
  
  <p>This is the state of the table when the data in the database is updated</p>
  
  <p><a href="https://i.stack.imgur.com/CNgCk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CNgCk.png" alt="state of the table when the data in the database is updated"></a></p>
  
  <p>This is the behavior of the table when any change is made on the table (i.e. sort, search, switch page, etc)
  <a href="https://i.stack.imgur.com/rVS05.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rVS05.png" alt="behavior of the table when any change is made on the table"></a></p>
  
  <p>This is the code for the component:</p>
  
  <pre><code>import { Component, OnDestroy, OnInit } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Subject } from 'rxjs';
  import { HttpClient } from '@angular/common/http';
  import { DownloadService } from '../services/download/download.service';
  import { stringify } from 'querystring';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-downloads',
    templateUrl: './downloads.component.html',
    styleUrls: ['./downloads.component.css']
  })
  
  export class DownloadsComponent implements OnInit {
  
    downloadData$: any[] = [];
    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject&lt;any&gt; = new Subject();
    interval: any;
  
    constructor(private http: HttpClient, private data: DownloadService, private router: Router) { }
  
    ngOnInit() {
      this.dtOptions = {
        responsive: true
      };
  
      this.data.GetDownloads().subscribe(data =&gt; {
        this.downloadData$ = data;
        this.dtTrigger.next();
      });
  
      this.interval = setInterval(() =&gt; {
        this.refreshData();
      }, 5000);
    }
  
    refreshData() {
      this.data.GetDownloads().subscribe(data =&gt; {
        this.downloadData$ = data;
      });
    }
  
    ngOnDestroy(): void {
      this.dtTrigger.unsubscribe();
    }
  }
  </code></pre>
  
  <p>and this is the html file</p>
  
  <pre><code>&lt;div&gt;
    &lt;table style="text-align: center;" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"
      datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Logger Name&lt;/th&gt;
          &lt;th&gt;Progress&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let download of downloadData$"&gt;
          &lt;td&gt;{{ download.logger.name }}&lt;/td&gt;
          &lt;td [attr.data-order]="download.progress"&gt;&lt;progress [attr.value]="download.progress" max="100"&gt;&lt;/progress&gt;
            {{ download.progress }}%&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>