Angular: Repeatition in life cycle methods firing sequence

Question

Just executed a simple piece of code:

import { Component } from '@angular/core';

function log(...args: Array<any>) {
  console.log.apply(null, args);
}

@Component({
  selector: 'app-root',
  template: '',
})
export class AppComponent {
  value = 'Some value';

  ngAfterContentInit(arg: any) {
    log('ngAfterContentInit');
  }

  ngAfterContentChecked(arg: any) {
    log('ngAfterContentChecked');
  }

  ngAfterViewInit(arg: any) {
    log('ngAfterViewInit');
  }

  ngAfterViewChecked(arg: any) {
    log('ngAfterViewChecked');
  }

  ngDoCheck(arg: any) {
    log('ngDoCheck');
  }
}

Please, see https://stackblitz.com/edit/angular-7xmjmb?file=src/app/app.component.ts (StackBlitz is forever loading on compiling, don't know why. Do you see the same everlasting loading preview?)

And it resulted in Console in a sequence of messages: ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked,

-- Angular is running in development mode. Call enableProdMode() to enable production mode. --

ngDoCheck, ngAfterContentChecked, ngAfterViewChecked.

Why do we have again ngAfterContentChecked and ngAfterViewChecked after ngDoCheck? My suggestion is that the reason is that after ngDoCheck Angular again executed checks of Content and View (because ngDoCheck could do something to them). But then why wasn't Content check executed after View check whereas ngAfterViewCheck could do something to Content.

What is the logics behind this?

Answer 1

Your index.html file has the wrong selector.

Should be:

<my-app>loading</my-app>

Here it's working: https://stackblitz.com/edit/angular-hz5k5d?file=src%2Fapp%2Fapp.component.ts