Lifecycle hooks in angular

angular-lifecycle-hooks.ts

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

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent
  implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  
  // called during initialization of the component
  constructor() {
    console.log('constructor called');
  }

  // only called for/if there is an @Input variable set by parent.
  ngOnChanges(changes: SimpleChanges) {
    /**
    {
      [component input property]:{
        previousValue: any,
        currentValue: any,
        firstChange: boolean,
        isFirstChange(): boolean
      }
    }
    */
  
    console.log('ngOnChanges called');
  }

  // called once component got initialized - think of it as post constructor
  ngOnInit() {
    console.log('ngOnInit called');
  }

  // Beware! Called frequently!
  // Called in every change detection cycle anywhere on the page
  ngDoCheck() {
    console.log('ngDoCheck called');
  }

  // Called once angular projects the external content into the Component's view
  ngAfterContentInit() {
    console.log('ngAfterContentInit called');
  }

  // Beware! Called frequently!
  // Called in every change detection cycle anywhere on the page
  ngAfterContentChecked() {
    console.log('ngAfterContentChecked called');
  }

// Called once angular initializes the Component's view and its child component/directives view
  ngAfterViewInit() {
    console.log('ngAfterViewInit called');
  }

  // Beware! Called frequently!
  // Called in every change detection cycle anywhere on the page
  ngAfterViewChecked() {
    console.log('ngAfterViewChecked called');
  }

  // called before angular destroys the component
  ngOnDestroy() {
    console.log('ngOnDestroy called');
  }
}

// console output
// constructor called
// ngOnChanges called
// ngOnInit called
// ngDoCheck called
// ngAfterContentInit called
// ngAfterContentChecked called
// ngAfterViewInit called
// ngAfterViewChecked called
// ngDoCheck called
// ngAfterContentChecked called
// ngAfterViewChecked called