Angular Loading dynamic component - ExpressionChangedAfterItHasBeenCheckedError
I need to dynamically instantiate multiple components.
I found several examples on the internet including StackOverflow and angular.io.
But always getting an ExpressionChangedAfterItHasBeenCheckedError exception when I assign a value to the component model.
Even dedicated an example of this function is the same exception: Angular.io article Plunker
ERROR: ExpressionChangedAfterItHasBeenCheckedError: The expression was changed after it was checked. Previous value: 'undefined'. Current value: "Bombasto". It looks like the view was created after its parent and its children were dirty checked. Was it created when changes were detected?
Should I just ignore this or can / should it be fixed?
source to share
This is because you are changing the state of the component to ngAfterViewInit
. See the problem here for a discussion of the behavior.
In your case, you can move the initial creation to ngOnInit
.
ngOnInit() { this.loadComponent(); this.getAds(); }
source to share
More generally
using
this._changeDetectionRef.detectChanges();
at the end of the method that updated to the late state of the component,
... not forgetting to add
private _changeDetectionRef : ChangeDetectorRef
as a parameter to the constructor of the Component that owns your method.
Look here
source to share