[Debugging] Expression has changed after it was checked
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about ExpressionChangedAfterItHasBeenCheckedError, treating it as the best official explanation of why Angular raises the error and how to track it down.
Recommended by 2 people across 2 different months, 2021 to 2023.
What it is
A short official video from the Angular team explaining what ExpressionChangedAfterItHasBeenCheckedError means, how to debug it, and how to avoid it. It is part of the team's debugging series and is presented on the official Angular channel.
What people said
Strong rec Meqwz · 2021-09 · Stack Overflow · on “Error ExpressionChangedAfterItHasBeenCheckedError with child component in Angular”
The most likely cause for this error is this ngIf: `*ngIf="validateControl('gender') && hasError('gender', 'required')"` But it's hard to tell without more of the template code. If you can identify the ngIf that's causing it, debugging would be easier. The official Angular video on this error is the best source for debugging it: [this video]
Recommends Krystian · 2023-05 · Stack Overflow · on “ExpressionChangedAfterItHasBeenCheckedError when testing Angular Material Table”
Understanding ExpressionChangedAfterItHasBeenCheckedError Instead of removing the line and getting rid of error that could be a valuable hint, actually I suggest to watch the video from Angular documentation explaining what is the error trying to warn you about. Angular helps to ensure that your component is stable after it was created. Stable means no values (properties) change when detectChanges() is run. It may be worth reviewing if there are any changes that you do in ngAfterViewInit or any function/properties returning different value with each call (like random) Documentation links Documentation: [LINK] Video (6 minutes): [this video] Specific case of mat-table Above is an explanation of th
Cites Oliver · 2021-02 · Stack Overflow · on “Why can't we manipulate objects passed to component via @input() in angular”
Regarding question 1: The short answer is yes, you should avoid manipulating data from the parent component in child components. This is because in Angular, data flows from parent to child components, and that data flows unidirectionally, which is somewhat hinted at in the angular docs [LINK] . In your case, you are modifying the parent component's data. Consider this example: @Component({ template: `<app-banner-component [banners]="parentBanners"></app-banner-component>` }) class ParentComponent { parentBanners: Offer[] = {...}; } After ngOnChanges was called, the parentBanners values will also have their bannerImage changed. This is because the array is not copied, but rather passed in by