CODEWITHSUNDEEP
angular
Darien Fawkes
Darien Fawkes

Reputation: 3103

ExpressionChangedAfterItHasBeenCheckedError in Angular v4.3.0

I have an error ExpressionChangedAfterItHasBeenCheckedError. Plunk: http://plnkr.co/edit/XKfHDAzuhjAhVvbQOpsW?p=preview

I find a explanation: 

https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked

But I did't know how I should make correct fix for this problem without an setTimeout in ngAfterViewInit.

The problem is with this.message variable. + same problem with ngAfterViewChecked. There is an fix without BehaviorSubject?

Upvotes: 1

Views: 375

Answers (2)

Darien Fawkes
Darien Fawkes

Reputation: 3103

Need to add this.ref.detectChanges(); on all ngAfterViewChecked types func.

Upvotes: 0

Max Koretskyi
Max Koretskyi

Reputation: 105547

You're using the message property of the Child component in the template:

@Component({
  selector: 'child-cmp',
  template: `
    <div>{{ message }}<input></div>`,
})
export class Child

Angular runs change detection (check) for the child component and updates the DOM. Then it remembers the value it used to update the DOM. This value will be used during verification step to check that bindings have not changed. The problem is that you're changing that value in the ngAfterViewInit lifecycle hook and this hook is triggered after the child component is checked. So the when Angular runs verification for the component it notices that the value is different. So it throws the error. Angular requires additional change detection run between the check and the verification phase.

If you really need to update the value in the ngAfterViewInit lifecycle hook, use it asynchronously or run change detection for the child component. Both are bad. Consider changing the application design.

See Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error article that explains the causes for the error and possible fixes in great details.

Upvotes: 1

Related Questions