[MatSort ] ExpressionChangedAfterItHasBeenCheckedError with aria-sort

[Xen3r0]

What is the expected behavior?

What is the current behavior?

I have a ExpressionChangedAfterItHasBeenCheckedError :

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'aria-sort: null'. Current value: 'aria-sort: ascending'.

How can i fix this ?

What are the steps to reproduce?

Example: https://stackblitz.com/edit/angular-vqqick

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

Angular: 7.2.13
Material: 7.3.7
Browser : chrome (latest)

Is there anything else we should know?

[crisbeto]

It's hard to tell when this is happening without a code sample or some more information.

[Xen3r0]

You have a projet sample in description, just launch and watch js console

[crisbeto]

Ah, I had missed it because it says "Stackblitz starter".

[Xen3r0]

Sorry, i edit my description :)

[joaodforce]

Im having a similar issue, And I cannot seem to find what the cause is.

It seems to be something with the hintLabel property, in my project my fields are being generated from a metadata array.

I've tried replicating the issue on Stackblitz with a simple project, and there no errors appear, Im using the same Angular and Material versions as the Author.

Even if I try [hintLabel]="'Text with fixed value'" the error appears, each mat-form-field is in a different component instance, maybe this is the issue, Im trying to replicate a similar case on Stackblitz to see if the same error appears, then I'll open an Issue of my own.

[andrewseguin]

You are changing the sort during change detection (after view init) which changes the template bindings in sort, so when Angular runs CD again (dev mode), it recognizes that a binding has been changed when it should have been stable.

To resolve this, you need to make sure you are not changing your sort during change detection. Either perform sort during ngOnInit before the view is checked, or add something like a timeout to your sort.

Here's a working example: https://stackblitz.com/edit/angular-mxm9h3?file=src/app/app.component.ts

[Xen3r0]

Thanks for you answer !

[angular-automatic-lock-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.}