Data table not reloading - primeNG

Question

I am working on an angular project that displays a set of data. For that I am using primeNG data table. Everything works fine but when I delete an entry from the data source the data table is not refreshing I can still see the deleted entry in the table. Any help will be appreciated.

mycomponent.html

 <p-dataTable [value]="tabledata">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

iam slicing the datasource on deletion

mycomponent.ts

this.tabledata.slice(this.tabledata.indexOf(datatodelete), 1); 

Answer 1

Plesae read the chapter Change detection of the link you provided .

Basically the idea is that you probably mutate your array storing the table values and angular doesn't know that the data has changed, because the array is still the same. Therefore you need to create a new array with the all values from the old, except for the one you deleted. Then, angular will work out that it needs to rerender the table as the array reference will change.

Please read more on Angular Change Detection strategies, eg here . Basically, if you use detection strategy default , then everything will work, as angular will check all components all the time for changes. But it can be very slow for bigger webpages, therefore it is advised to use Change Detection strategy OnPush . What this does it checks only references of the objects and if they have changed, it will update the view (what you see). There are quite a few details around how this works exactly, that I can't put here.

Answer 2

Finally i end up with solution. I just created a copy of my data source. And delete the entry from this copy, then reassign this copy to my original data source.

 this.datatablecopy = Object.assign([], this.datatable);


this.datatablecopy.slice(this.datatablecopy.indexOf(datatodelete), 1); 
this.datatable = this.datatablecopy;