Why am I getting ExpressionChangedAfterItHasBeenCheckedError Error when it is called before View is Checked - Angular

Question

This is my code

home-component.ts

export class HomeComponent implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
  loading = false;
  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('--parent ngOnChanges--')
  }

  ngOnInit(): void {
    console.log('--parent ngOnInit--')
  }

  ngDoCheck(): void {
    console.log('--parent ngDoCheck--')
  }

  ngAfterContentInit(): void {
    console.log('--parent ngAfterContentInit--')
  }

  ngAfterContentChecked(): void {
    console.log('--parent ngAfterContentChecked--')
  }

  ngAfterViewInit(): void {
    this.loading = true;
    console.log('--parent ngAfterViewInit--')
  }

  ngAfterViewChecked(): void {
    console.log('--parent ngAfterViewChecked--')
  }
}

home-component.html

<div *ngIf="loading">
    <h5>parent component</h5>
</div>

In the code above, I am changing the property value from false to true in the ngAfterViewInt life cycle hook, but my question is why am I getting

ExpressionChangedAfterItHasBeenCheckedError

As per the document ngAfterviewInit is triggered before ngAfterViewChecked, so, Angular has a chance to get the updated value by the time it triggers the ngAfterViewChecked life cycle hook, by no chance I should get this error , then why am I getting this error, please someone guide to the right answer

update 1

This is the order of the life cycle hook

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterViewInit
5. ngAfterViewChecked
6. ngAfterContentInit
7. ngAfterContentChecked

so, after I update the property value in the ngAfterViewInit hook, Angular still has a chance to check for any changes in the ngAfterViewChecked hook, then why is Angular throwing error when the made changes can be found in the ngAfterViewChecked hook

Answer 1

hook is called AFTER view is inited and checked. "init" hooks actually duplicate "check" hooks, but only called once. That is why you get the error. It tries to tell you that view've been change detected(all bindings updated) and then, in the same change detection cycle you update the property affecting the view that just have been checked.

the correct place for initializing properties should be ngOnInit() or just do that in place of declaring like loading = false

Answer 2

You encounter this error because loading binding is changed after change detection process has started, and before end of process.

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.

You should move your code loading = true in ngOnInit method in place of ngAfterViewInit.

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.

You can read more detail on this issue on official docs

A great video from fireship explains why and how to solve the issue.