🔄 Lifecycle Hooks

About This Feature

Angular calls lifecycle hook methods at specific moments during a component's creation, update, and destruction. Implement the corresponding interface to use each hook.

1. ngOnChanges — @Input() values changed
2. ngOnInit — component initialized (once)
3. ngDoCheck — custom change detection
4. ngAfterContentInit — projected content initialized
5. ngAfterContentChecked — projected content checked
6. ngAfterViewInit — component view rendered (access @ViewChild)
7. ngAfterViewChecked — component view checked
8. ngOnDestroy — just before destruction (cleanup!)

Code Example

@Component({ ... })
export class MyComponent implements
  OnChanges, OnInit, DoCheck,
  AfterContentInit, AfterContentChecked,
  AfterViewInit, AfterViewChecked, OnDestroy {

  @Input() value = '';

  // Called before ngOnInit and on every @Input change
  ngOnChanges(changes: SimpleChanges) {
    console.log('Input changed:', changes);
  }

  // Called once after first ngOnChanges
  ngOnInit() { /* initialize component */ }

  // Called after every change detection run
  ngDoCheck() { /* custom change detection */ }

  // Called after content projection (ng-content)
  ngAfterContentInit()    { }
  ngAfterContentChecked() { }

  // Called after component's view is rendered
  ngAfterViewInit()    { /* access @ViewChild here */ }
  ngAfterViewChecked() { }

  // Called just before the component is destroyed
  ngOnDestroy() { /* cleanup subscriptions */ }
}

Live Demo