Skip to main content

What hooks exist and in what order are they called?

In Angular, lifecycle hooks are called in a strictly defined order. The full sequence for a component looks like this:

Full sequence

  1. ngOnChanges(changes) - called for the first time when Angular sets the values of input properties (@Input). Called every time the input properties change.
  2. ngOnInit() - once, after the input properties are first initialized.
  3. ngDoCheck() - after ngOnInit and on every change detection cycle.
  4. ngAfterContentInit() - after the parent's content is inserted via <ng-content>.
  5. ngAfterContentChecked() - after every check of the inserted content.
  6. ngAfterViewInit() - after the component's template and all child components are initialized.
  7. ngAfterViewChecked() - after every check of the component's view.
  8. ngOnDestroy() - before the component is destroyed, for cleaning up resources.

Schematically:

javascript
ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked (ngDoCheck/ngAfterContentChecked/ngAfterViewChecked repeat on updates) → ngOnDestroy

Conclusion: the sequence reflects the component's lifecycle from creation to destruction, including the handling of input data, content, and the view.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.