Angular Component Lifecycle Hooks

Why it exists

Angular manages when components are created, rendered, and destroyed. Developers need a way to hook into this managed process to perform actions like fetching data, setting up subscriptions, or cleaning up resources at exactly the right time. Lifecycle hooks provide these standardized, predictable entry points.

The mental model

A component's lifecycle is like a human's life: birth (creation), growth (updates), and death (destruction). Lifecycle hooks are like milestones in that life. The constructor is the birth itself. ngOnInit is the 'welcome home' party after inputs are delivered. ngOnChanges is reacting to new information. ngOnDestroy is writing a will to clean everything up. They are specific, ordered moments where you can intervene and run your own code.

How it works

You implement lifecycle hooks as methods on your component's class, like ngOnInit() { ... }. When Angular's change detection engine processes your component, it calls these methods in a strict sequence. The core sequence for a component instance is: first, the constructor runs; second, ngOnChanges runs whenever an input changes (it also runs once initially, before ngOnInit); third, ngOnInit runs exactly once for initial setup; and finally, ngOnDestroy runs just before the component is removed from the DOM.

When to use it

Use ngOnInit for one-time initialization logic that depends on component inputs, like fetching data from an API based on an ID passed into the component. Use ngOnChanges to perform an action in response to a change in an input property's value. Use ngOnDestroy to prevent memory leaks by cleaning up resources, such as unsubscribing from observables or detaching global event listeners.

When not to use it

Do not place logic that relies on input properties (decorated with @Input()) in the constructor. The inputs are not yet assigned their values at that stage. This is the most common mistake; use ngOnInit for that work. Also, avoid logic that changes component state within the ngAfterViewChecked or ngAfterContentChecked hooks, as this can trigger an infinite loop of change detection cycles.

One canonical example

A user profile component receives a userId as an input. In ngOnInit, it uses this userId to call a service and fetch the user's details to display. Later, if a parent component passes a new userId to the profile component, the ngOnChanges hook will fire. Inside ngOnChanges, you can detect that the userId has changed and trigger another data fetch for the new user, ensuring the profile view stays up to date.