Components: ExpressionChangedAfterItHasBeenCheckedError when matSortActive and MatPaginator are both used

[victornoel]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Using MatTable with MatPaginator, MatSort and a default sort configured with matSortActive should work without error.

What is the current behavior?

• when using MatTable with MatPaginator, MatSort and a default sort configured with matSortActive,
  
  
  
  • if all the elements of the datasource are not shown in the first page,
  
  
  • then the error ExpressionChangedAfterItHasBeenCheckedError is produced without good reason.
  
  

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-cadz7g

On loading, the error ExpressionChangedAfterItHasBeenCheckedError is produced.

I suspect that it is the combination between the paginator not showing every elements and the default sort that triggers some kind of intermediary state where a cell changes after change detection has passed.

Also:

• disabling the default sort order (matSortActive) or the paginator binding in ngAfterViewInit makes the error disappear.
• setting the paginator to show more items than available also makes the error disappear.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.7.3
Node: 6.9.5
OS: linux x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

[WizardPC]

I'm not sure but the result is here and not the error :

https://stackblitz.com/edit/angular-material2-issue-gqmbva

[victornoel]

@WizardPC I'm surprised that sort is already bound when ngOnInit is called and before afterViewInit, but yes, it seems to work like this.

Let's wait for a comment from the devs to see if there is more to it :)

[WizardPC]

@victornoel yep !

1. You set the data you want in your table (onInit)
2. You sort your data (onInit) BUT it's optional
3. The paginator need to "know" the datas to do his job (afterViewInit)

It's just my logical reasoning. Not from coding point of view ^^

[victornoel]

@WizardPC actually, to fix the problem, from my original stackblitz, you just need to set the sort before the paginator in ngAfterViewInit.

Note also that the data must be set in ngOnChanges, but that's not a problem here.

[WizardPC]

@victornoel good to know :)

[andrewseguin]

It's valid to use ngOnInit in v6 due to some changes in #10593

[santonica]

Setting the dataSource in ngOnInitand setting paginator in ngAfterViewInitworks fine with M6. Setting paginator inside ngOnInitdid not work.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}