[Angular] AfterContentChecked && AfterViewChecked

AfterContentChecked & AfterViewChecked are called after 'OnChanges' lifecycle. And each time 'ngOnChanges' triggered, ngAfterContentChecked and ngAfterViewChecked will also be called. Which means we should be careful what we do in those lifecycle should be light weight, no havey calculation.

 

AfterContentChecked:

Here is the last chance you can modify the data before it rendered to the DOM. But there is one restriction that you cannot modify the data which passed to the content projection component:

<course-card [course]="course">
    <course-image [image-url]="imageURL"></course-image>
</course-card>

ngAfterContentChecked () {
  this.course.description = 'something new'; // OK
  this.course.imageUrl = "" // error  
}

You cannot modify imageUrl prop since it is used by the content projection.

 

AfterViewChecked:

After the whole template has been checked, this lifecycle will be called, it means you cannot modify the @Input data any more. Otherwise it will throw error.

Here what you can do is doing some DOM animation, foucs management... because DOM is already renderered to the screen.