MatTableDataSource does not unsubscribe from sort and paginator streams

[gaspaonrocks]

What are you trying to do?

I have a dynamic Mat Table with data changing. I want to be able to sort the rows using the Mat Sort directive. However, after the datasource has changed, if I set the sort property with the existing @ViewChild(MatSort), the subsequent calls to sortData increases. It can harm performances if we go back and forth between data sources.

What troubleshooting steps have you tried?

I tried to look in several attributes in MatSort and MatTable and see if I can either destroy the directive or unsubscribe from any Subject. I'm still looking into it, but I'm open to suggestions...

Reproduction

Minimal example here => https://stackblitz.com/edit/angular-ivy-pvqd1r?file=src/app/hello.component.ts

The "randomize" button will switch between 2 table, however, we lose the sort ability. I added the sortData and the sortAccessorKey to add a console.log() to monitor the number of calls.

Steps to reproduce:

1. Check if the sort works
2. Click on the button to change the table
3. See that the sort call increments by one
   repeat steps 2-3 ad nauseum.

If I only changed the table in the randomize method (commenting l31), we lose the sort ability, yet the sortData method is called.

If the directive is destroyed (in my case is to navigate to a completely different component and come back) the MatSort is reset and we are back to square one.

Environment

• Angular: ~10.2.0
• CDK/Material: ^10.2.7
• Browser(s): Firefox
• Operating System: Windows 10

[jelbourn]

This seems to be a bug. It appears that MatTableDataSource subscribes to streams from MatSort and MatPaginator, but doesn't unsubscribe from those streams in its disconnect function.

[gaspaonrocks]

@jelbourn I never thought of thinking the issue might be with the table. I'll check that on my end.

[gaspaonrocks]

Update.

Turns out, setting the dataSource.sort and dataSource.paginator to null before setting a new MatTableDataSource is enough to unsubscribe to the sort/paginator stream.

I've looked in the disconnect function, which is empty. But it is never called when used as described. There might be a way to hook it to onChanges from the table and trigger it when the source updates...

For now it is working. It would be wise to maybe add something to the documentation to alert people about that issue.