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
Top comments (0)