LifeCycle Hooks

Question 1

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.

Answer 1

ngOnChanges()

Note:
Called before ngOnInit() and whenever one or more data-bound input properties change.

Question 2

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties.

Answer 2

ngOnInit()

Note:
Called once, after the first ngOnChanges().

Question 3

Detect and act upon changes that Angular can’t or won’t detect on its own.

Answer 3

ngDoCheck()

Note:
Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

Question 4

Respond after Angular projects external content into the component’s view / the view that a directive is in.

Answer 4

ngAfterContentInit()
Note:

Called once after the first ngDoCheck().

Question 5

Respond after Angular checks the content projected into the directive/component.

Answer 5

ngAfterContentChecked()

Note:
Called after the ngAfterContentInit() and every subsequent ngDoCheck()

Question 6

Respond after Angular initializes the component’s views and child views / the view that a directive is in.

Answer 6

ngAfterViewInit()

Note:
Called once after the first ngAfterContentChecked().

Question 7

Respond after Angular checks the component’s views and child views / the view that a directive is in.

Answer 7

ngAfterViewChecked()

Note:
Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

Question 8

Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Answer 8

ngOnDestroy()

Note:
Called just before Angular destroys the directive/component.