[Angular] ExpressionChangedAfterItHasBeenCheckedError
There are many ways to cause this exception. One of them is by generating components dynamically. In this case, I use PrimeNG to generate TabView with data bound to a FormControl object.
I use ListBox with multiple selection for user to choose which tabs they want to show on UI. When they select or deselect the items, tabs would be automatically generated. But when I tried to deselect item in order to make the shown tab disappears, it showed this error message on debug console. (Actually, we can also observe update latency on UI.)
The reason why we have this exception is because of the value in FormControl has changed by background logic which caused inconsistent status of component. (Reference)
The concept of solution is simple — Update component status when value changes. In this case, we can simply use ChangeDetectorRef to force another change detection cycle to handle update of component for us. We can hook this handling in ngOnInit or ngAfterViewInit. Both can reach the same result.
After adapting this solution, exception was gone. We can no longer observe update latency of UI. Problem solved. 👏👏👏
