Hey everyone. I’m Placide (@rigole), a full-stack developer passionate about Angular, TypeScript, Java And Python(Yeah that could be a lot but with passion you do not count).
When I first started using Angular, I thought lifecycle hooks were just “fancy methods” that Angular called automatically. But as I got experiences and grew more comfortable with the framework, I realized they’re actually the heartbeat of every Angular component. Understanding them can help you control how your app behaves from creation to destruction — and make your code much cleaner and more predictable.
Let’s dive in. Shall we ?
What Are Lifecycle Hooks ?
In Angular, lifecycle hooks are special methods that allow you to tap into key moments of a component’s life — from the moment it’s created, to when it’s updated, to when it’s destroyed.
Each hook represents a specific stage of the component’s “lifecycle.”
Here’s the full sequence:
ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit
→ ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked → ngOnDestroy
It seems a lot but don’t worry — you don’t need all of them.
Let’s look at the ones you’ll use most often:
ngOnInit() — Initialization Magic
This is one of the most commonly used hooks.
It runs once, right after Angular initializes all data-bound properties.
export class ProductListComponent implements OnInit {
products: Product[] = [];
ngOnInit() {
this.loadProducts();
}
private loadProducts() {
this.products= [{ name: 'watches' }, { name: 'phones' }];
}
}
Pro tip: Keep your initialization logic here — not in the constructor because the constructor should only handle dependency injection, not side effects.
ngOnChanges() — Reacting to Input Changes
Whenever a parent component updates an @Input() -A post about it is coming.We are going to talk about reusable component- value, Angular triggers ngOnChanges()
export class ProductDetailsComponent implements OnChanges {
@Input() productName!: string;
ngOnChanges(changes: SimpleChanges) {
if (changes['productName']) {
console.log('Product Name changed:', changes['productName'].currentValue);
}
}
}
Pro tip: Perfect for components that depend on dynamic input data (e.g., updating details when a user is selected).
ngOnDestroy() — The Cleanup Hero
This hook runs right before the component is destroyed.
It’s the best place to clean up anything that could cause memory leaks, like subscriptions or timers.
export class ChatComponent implements OnDestroy {
private subscription!: Subscription;
ngOnInit() {
this.subscription = this.chatService.listen().subscribe();
}
ngOnDestroy() {
this.subscription.unsubscribe();
console.log('Chat component destroyed');
}
}
Pro tip: Always clean up your observables and DOM listeners here.
You’ll thank yourself later.
ngAfterViewInit() — The View Is Ready
This hook is called after Angular initializes the component’s view and child views.
Use it for working with @ViewChild()-Articles is coming too- references or DOM elements.
export class DashboardComponent implements AfterViewInit {
@ViewChild('chart') chart!: ElementRef;
ngAfterViewInit() {
this.chart.nativeElement.focus();
}
}
Pro tip: If you try to access @ViewChild() before this hook, it’ll be undefined so be carefull
Why Lifecycle Hooks Matter
Lifecycle hooks are more than just Angular internals — they’re tools that help you:
Improve component reusability and testing
Understand how Angular manages your app’s state
Write cleaner, more predictable code
Avoid memory leaks
Understanding Angular’s lifecycle hooks is like learning how the engine of your car works.
You don’t need to be an expert mechanic, but knowing when to accelerate, pause, and stop makes you a better driver — and a better Angular developer.
If you found this useful, I share more tips like this on my LinkedIn — feel free to connect with me there! Here is the link
What’s your favorite lifecycle hook, and how has it helped you write cleaner Angular code?
Drop it in the comments — I’d love to learn from your experience too.
Top comments (0)