Lifecycle Hooks in Angular
Lifecycle hooks are functions that Angular calls at specific moments during the lifetime of a component or directive. They allow you to tap into these moments and execute custom logic.
Angular components and directives have a lifecycle, which is a series of events from creation to destruction. Lifecycle hooks provide a way to hook into these events and perform actions at specific times.
Why Use Lifecycle Hooks?
- Initialization: Perform setup tasks when a component or directive is created.
- Change Detection: React to changes in input properties.
- View Initialization: Access and manipulate the component's view after it has been initialized.
- Cleanup: Perform cleanup tasks before a component or directive is destroyed.
Lifecycle Hooks in Angular
Here are the lifecycle hooks in Angular, in the order they are called:
1. ngOnChanges()
Called when an input property bound to a component or directive changes.
Example
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-change-detection',
template: '<p>Previous Value: {{ previousValue }}</p><p>Current Value: {{ currentValue }}</p>'
})
export class ChangeDetectionComponent implements OnChanges {
@Input() inputValue: string;
previousValue: string;
currentValue: string;
ngOnChanges(changes: SimpleChanges): void {
if (changes['inputValue']) {
this.previousValue = changes['inputValue'].previousValue;
this.currentValue = changes['inputValue'].currentValue;
}
}
}
2. ngOnInit()
Called after Angular initializes the data-bound input properties.
Example
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-init',
template: '<p>Initialized!</p>'
})
export class InitComponent implements OnInit {
ngOnInit(): void {
console.log('ngOnInit called');
}
}
3. ngDoCheck()
Called during every change detection run.
Example
import { Component, DoCheck } from '@angular/core';
@Component({
selector: 'app-do-check',
template: '<p>DoCheck</p>'
})
export class DoCheckComponent implements DoCheck {
ngDoCheck(): void {
console.log('ngDoCheck called');
}
}
4. ngAfterContentInit()
Called after Angular initializes content projected into the component.
Example
import { Component, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-content-init',
template: '<ng-content></ng-content>'
})
export class ContentInitComponent implements AfterContentInit {
ngAfterContentInit(): void {
console.log('ngAfterContentInit called');
}
}
5. ngAfterContentChecked()
Called after Angular checks the content projected into the component.
Example
import { Component, AfterContentChecked } from '@angular/core';
@Component({
selector: 'app-content-checked',
template: '<ng-content></ng-content>'
})
export class ContentCheckedComponent implements AfterContentChecked {
ngAfterContentChecked(): void {
console.log('ngAfterContentChecked called');
}
}
6. ngAfterViewInit()
Called after Angular initializes the component's view.
Example
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-view-init',
template: '<p>View Initialized</p>'
})
export class ViewInitComponent implements AfterViewInit {
ngAfterViewInit(): void {
console.log('ngAfterViewInit called');
}
}
7. ngAfterViewChecked()
Called after Angular checks the component's view.
Example
import { Component, AfterViewChecked } from '@angular/core';
@Component({
selector: 'app-view-checked',
template: '<p>View Checked</p>'
})
export class ViewCheckedComponent implements AfterViewChecked {
ngAfterViewChecked(): void {
console.log('ngAfterViewChecked called');
}
}
8. ngOnDestroy()
Called just before Angular destroys the component or directive.
Example
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-destroy',
template: '<p>Component Destroyed</p>'
})
export class DestroyComponent implements OnDestroy {
ngOnDestroy(): void {
console.log('ngOnDestroy called');
}
}
Key Points
- Lifecycle hooks allow you to tap into the component's lifecycle.
- Use
ngOnInit()for initialization tasks. - Use
ngOnChanges()to react to input property changes. - Use
ngOnDestroy()to clean up resources. - Understand the order in which lifecycle hooks are called.
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.