Angular : Lifecycle Hooks
“Life’s a journey, and so is your Angular component!”
Just like a person, your component goes through various stages of existence — birth, growth, and the occasional existential crisis (if you’ve ever had to debug ngOnInit... you know the feels).
In this blog, we’ll walk you through the Angular Lifecycle Hooks that allow your components to live their best lives. You’ll get to know when they’re born (spoiler: not in ngOnInit), when they make an exit (and maybe leave behind some broken promises), and when they’re just hanging around, waiting for the next event. So buckle up, grab your coffee, and let’s take a deep dive into the only thing that lasts longer than your average Monday: Angular's component lifecycle. ⏳
Introduction:
Angular provides a set of lifecycle hooks that allow developers to execute custom logic at specific points in the life cycle of an Angular component. These hooks enable you to perform actions like initialisation, cleanup, and interactions with the DOM.
Here is a list of common lifecycle hooks in Angular.
Lifecycle hooks in Angular:
1. ngOnChanges
Called whenever one or more input properties of the component change. It receives a SimpleChanges object with the previous and current values of the input properties.
Use Cases: React to changes in input properties and update the component’s state accordingly.
2. ngOnInit
Called once after the component and its input properties have been initialised. It’s a good place to perform initial setup.
Use Cases: Initialize component properties, fetch initial data, and set up subscriptions.
3. ngDoCheck
Called during every change detection cycle. It provides an opportunity to implement custom change detection logic.
Use Cases: Perform custom change detection, track changes outside of Angular, and optimize performance.
4. ngAfterContentInit
Called once after the content (projected content in <ng-content>) has been initialized.
Get Apoorv Verma’s stories in your inbox
Join Medium for free to get updates from this writer.
Use Cases: Access and manipulate projected content or child components after they have been initialised.
5. ngAfterContentChecked
Called after each change detection cycle that checks the content. It’s often used for post-processing of projected content.
Use Cases: Perform additional logic on projected content after change detection.
6. ngAfterViewInit
Called once after the component’s view and its child views (including child components) have been initialised.
Use Cases: Access and manipulate the DOM or child components’ views after they have been initialised.
7. ngAfterViewChecked
Called after each change detection cycle that checks the component’s view and its child views. It’s often used for post-processing of the view.
Use Cases: Perform additional logic on the view after change detection.
8. ngOnDestroy
Called just before the component is destroyed and removed from the DOM. It provides an opportunity to perform cleanup tasks like unsubscribing from observables.
Use Cases: Clean up resources, subscriptions, and perform finalisation tasks.
Summary
These lifecycle hooks allow you to control the behaviour of your components at various stages of their lifecycle. You can implement them by defining corresponding methods in your component class. Angular will automatically call these methods as part of the component’s lifecycle.
Understanding and using these hooks effectively is crucial for managing component state, optimising performance, and ensuring proper interactions with the Angular framework.
And That’s a Wrap — Or Is It? 💥”
Congratulations, you’ve just made it through the wild ride of Angular lifecycle hooks!
Whether your component’s a baby in ngOnInit, a teenager trying to ngOnChanges their ways, or just trying to ngOnDestroy before it gets too deep, we hope you now have a better understanding of how Angular keeps its cool.
Just remember: Lifecycle hooks are there to keep your app alive (literally). So, next time your component throws a tantrum or disappears like a ninja, just pull out the right hook, and watch your app dance like it’s auditioning for a role in a Broadway show.
Until next time, keep your hooks in check and your components well-behaved, or… well, you’ll know when it’s time to ngOnDestroy!
