Angular ExpressionChangedAfterItHasBeenCheckedError on Primeng Components

Question

i'd like to ask you a question about the issue i am experiencing: I'm currently working on an Angular (15, but also had this problem on Angular 14) project that uses Primeng (14.2.2, but also has this problem on 14.1.2). The problem is caused by any Primeng dropdown when i start interacting with it quickly (clicking with my mouse or holding enter after focus), this causes me this error: dropdown error multiselect error

I don't really know what is actually causing this error in my project, i didn't experience it in another project i worked on (that used Angular 12.0.0 and Primeng 13.3.3, but recently got updated to Angular 14 and is not showing this problem at all). I tried switching Angular and Primeng versions, but the error persisted. Does anyone know what is actually causing this problem? Can this be fixed? Thanks in advace if anyone is going to give me a reply, i'll be happy to add further information if needed

Answer 1

Angular throws an ExpressionChangedAfterItHasBeenCheckedError when an expression value has been changed after change detection has completed. Angular only throws this error in development mode .

In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occurs, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.

This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like ngAfterViewInit or ngOnChanges. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.

Click to read more