Login to manage your account

Please enter a valid email address.
Forgot Password?
Please enter a valid password.
OR

Don't have an account yet? Sign up

Explain the Angular component lifecycle hooks and when you would use each.

In the order they run:

  • ngOnChanges — before ngOnInit and again whenever a bound input changes. It receives a SimpleChanges object with previous and current values. Use it to react to input changes.
  • ngOnInit — once, after the first ngOnChanges. This is where initialisation belongs, including data fetching. The constructor should only assign injected dependencies.
  • ngDoCheck — every change detection cycle. Powerful and dangerous; only for custom change detection.
  • ngAfterContentInit / ngAfterContentChecked — after projected content, from ng-content, has been initialised or checked.
  • ngAfterViewInit / ngAfterViewChecked — after the component's own view and child views are ready. This is the earliest point a @ViewChild reference is available.
  • ngOnDestroy — just before the component is removed. Unsubscribe, clear timers, and detach event listeners here.

Note: Two traps come up repeatedly. Modifying a bound value inside ngAfterViewInit throws ExpressionChangedAfterItHasBeenCheckedError in development mode. And ngOnDestroy is the single most important hook for avoiding memory leaks.

All Angular interview questions

Login to manage your account

Please enter a valid email address.
Forgot Password?
Please enter a valid password.
OR

Don't have an account yet? Sign up as