Why is ngDoCheck() called again after ngAfterContentChecked() for both the AppComponent and...

I am using Angular 19. I have created a simple project to better understand the lifecycle hooks. I noticed that ngDoCheck() is called again after ngAfterContentChecked() for both the AppComponent and ChildComponent. Why is that so? This behavior is seen in both development and production mode.

Here is the source code for what I have tried:

app.component.html:


<button (click)="incrementCounter()">Click Me</button>
<app-child [value]="counter"></app-child>



app.component.ts:


import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
selector: 'app-root',
imports: [ChildComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit, OnChanges, OnDestroy, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewInit, AfterViewChecked {

constructor() {
console.log('Inside AppComponent constructor()');
}

ngOnInit(): void {
console.log('Inside AppComponent ngOnInit()');
}

ngOnDestroy(): void {
console.log('Inside AppComponent ngOnDestroy()');
}

ngOnChanges(changes: SimpleChanges): void {
console.log('Inside AppComponent ngOnChanges()');
}

ngDoCheck(): void {
console.log('Inside AppComponent ngDoCheck()');
}

ngAfterContentInit(): void {
console.log('Inside AppComponent ngAfterContentInit()');
}

ngAfterContentChecked(): void {
console.log('Inside AppComponent ngAfterContentChecked()');
}

ngAfterViewInit(): void {
console.log('Inside AppComponent ngAfterViewInit()');
}

ngAfterViewChecked(): void {
console.log('Inside AppComponent ngAfterViewChecked()');
}

counter = 0;

incrementCounter() {
this.counter++;
}

}



child.component.html:


<p>Counter value: {{ counterValue }}</p>



child.component.ts:


import { Component, Input, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrl: './child.component.scss'
})
export class ChildComponent {

constructor() {
console.log('Inside ChildComponent constructor()');
}

ngOnInit(): void {
console.log('Inside ChildComponent ngOnInit()');
}

ngOnDestroy(): void {
console.log('Inside ChildComponent ngOnDestroy()');
}

ngOnChanges(changes: SimpleChanges): void {
console.log('Inside ChildComponent ngOnChanges()');
}

ngDoCheck(): void {
console.log('Inside ChildComponent ngDoCheck()');
}

ngAfterContentInit(): void {
console.log('Inside ChildComponent ngAfterContentInit()');
}

ngAfterContentChecked(): void {
console.log('Inside ChildComponent ngAfterContentChecked()');
}

ngAfterViewInit(): void {
console.log('Inside ChildComponent ngAfterViewInit()');
}

ngAfterViewChecked(): void {
console.log('Inside ChildComponent ngAfterViewChecked()');
}

@Input({alias: 'value'}) counterValue:number = 0;

}

Continue reading...