Angular Hooks

ngOnChanges

Purpose: Detect and act on changes to input (@Input) properties.
When it is called: Called whenever an input property changes (before ngOnInit for the first change).
Usage Example:
typescript

@Input() data: string;

ngOnChanges(changes: SimpleChanges) {
console.log('Input changes detected:', changes);
}
Work: Useful for reacting to changes in the component's inputs.
ngOnInit

Purpose: Initialize the component after Angular first displays the data-bound properties.
When it is called: Once, after the component's inputs are initialized.
Usage Example:
typescript

ngOnInit() {
console.log('Component initialized!');
}
Work: Often used for fetching data or initializing component-level properties.
ngDoCheck

Purpose: Perform custom change detection (manually check or react to changes).
When it is called: Called during every Angular change detection cycle.
Usage Example:
typescript

ngDoCheck() {
console.log('Custom change detection logic!');
}
Work: Rarely needed, but useful for advanced cases requiring custom change detection logic.
ngAfterContentInit

Purpose: Respond after Angular projects external content into the component’s view (via ).
When it is called: Once, after projecting content into the component.
Usage Example:
typescript

ngAfterContentInit() {
console.log('Content projection initialized!');
}
Work: Useful when working with transcluded content.
ngAfterContentChecked

Purpose: Respond after Angular checks the projected content for changes.
When it is called: After each change detection cycle that checks projected content.
Usage Example:
typescript

ngAfterContentChecked() {
console.log('Projected content checked!');
}
Work: Often paired with ngAfterContentInit.
ngAfterViewInit

Purpose: Respond after Angular initializes the component’s view and child views.
When it is called: Once, after the component’s view is initialized.
Usage Example:

ngAfterViewInit() {
console.log('View initialized!');
}
Work: Useful for DOM manipulation or initializing third-party libraries after the view is ready.
ngAfterViewChecked

Purpose: Respond after Angular checks the component's view and child views for changes.
When it is called: After each change detection cycle that checks the component’s view.
Usage Example:
typescript

ngAfterViewChecked() {
console.log('View checked!');
}
Work: Helps monitor and react to changes in the component’s DOM.
ngOnDestroy

Purpose: Cleanup before the component or directive is destroyed.
When it is called: Just before Angular destroys the component.
Usage Example:
typescript

ngOnDestroy() {
console.log('Component destroyed!');
}
Work: Useful for unsubscribing from observables, clearing intervals, and cleaning resources.
Order of Lifecycle Hook Execution
For components, the typical lifecycle order is as follows:

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy