Understanding Angular Life Cycle Hooks: A Comprehensive Guide

By coursity / June 11, 2024

When working with Angular, it’s essential to understand the lifecycle of a component. Angular provides several lifecycle hooks that allow you to tap into different phases of a component’s existence, from creation to destruction. This blog will explore these lifecycle hooks, illustrating their use with code examples.

What Are Angular Life Cycle Hooks?

Lifecycle hooks are methods Angular calls during the various phases of a component’s lifecycle. These hooks provide opportunities to execute custom logic at critical points in a component’s existence. The primary lifecycle hooks in Angular are:

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

Let’s dive into each of these hooks with code examples.

1. ngOnChanges

ngOnChanges is called before ngOnInit and whenever one or more data-bound input properties change. It receives a SimpleChanges object that contains the current and previous property values.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-on-changes-example', template: `<p>{{ data }}</p>`
})
export class OnChangesExampleComponent implements OnChanges { @Input() data: string; ngOnChanges(changes: SimpleChanges) { console.log('ngOnChanges - data changed:', changes); }
}

Enter fullscreen mode
Exit fullscreen mode

2. ngOnInit

ngOnInit is called once, after the first ngOnChanges. It’s typically used for component initialization and fetching data.

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-on-init-example', template: `<p>ngOnInit example works!</p>`
})
export class OnInitExampleComponent implements OnInit { ngOnInit() { console.log('ngOnInit - component initialized'); }
}

Enter fullscreen mode
Exit fullscreen mode

3. ngDoCheck

ngDoCheck is called during every change detection run, allowing you to implement your custom change detection.

import { Component, DoCheck } from '@angular/core'; @Component({ selector: 'app-do-check-example', template: `<p>ngDoCheck example works!</p>`
})
export class DoCheckExampleComponent implements DoCheck { ngDoCheck() { console.log('ngDoCheck - custom change detection'); }
}

Enter fullscreen mode
Exit fullscreen mode

4. ngAfterContentInit

ngAfterContentInit is called once after Angular projects external content into the component’s view.

import { Component, AfterContentInit, ContentChild } from '@angular/core'; @Component({ selector: 'app-after-content-init-example', template: `<ng-content></ng-content>`
})
export class AfterContentInitExampleComponent implements AfterContentInit { @ContentChild('projectedContent') content; ngAfterContentInit() { console.log('ngAfterContentInit - content initialized', this.content); }
}

Enter fullscreen mode
Exit fullscreen mode

5. ngAfterContentChecked

ngAfterContentChecked is called after every check of projected content.

import { Component, AfterContentChecked, ContentChild } from '@angular/core'; @Component({ selector: 'app-after-content-checked-example', template: `<ng-content></ng-content>`
})
export class AfterContentCheckedExampleComponent implements AfterContentChecked { @ContentChild('projectedContent') content; ngAfterContentChecked() { console.log('ngAfterContentChecked - content checked', this.content); }
}

Enter fullscreen mode
Exit fullscreen mode

6. ngAfterViewInit

ngAfterViewInit is called once after the component’s view and its child views have been initialized.

import { Component, AfterViewInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-after-view-init-example', template: `<p #viewChildElement>View Child</p>`
})
export class AfterViewInitExampleComponent implements AfterViewInit { @ViewChild('viewChildElement') viewChild; ngAfterViewInit() { console.log('ngAfterViewInit - view initialized', this.viewChild); }
}

Enter fullscreen mode
Exit fullscreen mode

7. ngAfterViewChecked

ngAfterViewChecked is called after every check of the component’s view and its child views.

import { Component, AfterViewChecked, ViewChild } from '@angular/core'; @Component({ selector: 'app-after-view-checked-example', template: `<p #viewChildElement>View Child</p>`
})
export class AfterViewCheckedExampleComponent implements AfterViewChecked { @ViewChild('viewChildElement') viewChild; ngAfterViewChecked() { console.log('ngAfterViewChecked - view checked', this.viewChild); }
}

Enter fullscreen mode
Exit fullscreen mode

8. ngOnDestroy

ngOnDestroy is called just before Angular destroys the component. This hook is typically used for cleanup, such as unsubscribing from observables and detaching event handlers.

import { Component, OnDestroy } from '@angular/core'; @Component({ selector: 'app-on-destroy-example', template: `<p>ngOnDestroy example works!</p>`
})
export class OnDestroyExampleComponent implements OnDestroy { ngOnDestroy() { console.log('ngOnDestroy - component destroyed'); }
}

Enter fullscreen mode
Exit fullscreen mode

Conclusion

Understanding Angular’s lifecycle hooks is crucial for building robust, efficient, and maintainable applications. These hooks provide precise control over component initialization, changes, and destruction, enabling you to implement custom logic at each stage of a component’s lifecycle. By mastering these hooks, you can ensure that your Angular applications behave as expected and perform optimally.

Happy coding!

Exploring the Code

Visit the GitHub repository to explore the code in detail.

Related

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment Cancel Reply