ExpressionChangedAfterItHasBeenCheckedError when matSortActive and MatPaginator are both used

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

[andrewseguin]

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

[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.