in mat table: new MatTableDataSource VS ChangeDetectorRef , which one is better to use in order to refresh the source data?

Question

when data has changed we can update the table by dataSource = new MatTableDataSource<PeriodicElement>([]) and then assign data to the datasource (this.datasource = data) will automatically update the table.

We also can use this.changeDetectorRefs.detectChanges() alternatively. which one is better to be used?

I think it will work like what I mentioned below, but I doubt: assume we use these two methods:

method 1) new MatTableDataSource

method 2) changeDetectorRefs

So

init data:

     data=[
    {id=1, price = 8, buy = 2},
    {id=2, price = 10, buy = 5},
    ]

and new data: 

    data=[
    {id=1, price = 8, buy = 2},
    {id=2, price = 20, buy = 5}, // price has changed (update)
    ]

Then:

If we use method 1: the whole rows in the mat table will be affected.

if we use method 2: just the second row with id 2 will be changed and the first row in the table will not change.

Is it right? I want to know which one is more good to use? (if it's like what I explained then method 2 will be preferred)

score 0 · Accepted Answer · answered Jul 31 '21 at 10:55

Based on this ChangeDetectorRef is more efficient way than set data source again, because it detect the and update the only data has been changed not all data.

So if you have paginated and there is only a few items (say 10 or 20 records) there is no much difference between them. But if you have more data in your grid at one time the second approach is best for you

in mat table: new MatTableDataSource VS ChangeDetectorRef , which one is better to use in order to refresh the source data?

1 Answers1