ANGULAR COMPONENT LIFECYCLE HOOK METHODS YOU SHOULD KNOW

Angular Lifecycle Hooks You Need to Know

What is “Lifecycle” and “Hook”?

Before understanding Angular lifecycle hooks, let’s break down the two key terms:

Lifecycle

Lifecycle refers to the different stages a component goes through from:

• Creation
• Rendering
• Updating
• And finally destruction

You can think of it like a living organism:

«It is “born”, it “grows”, and eventually it “dies”.»

---

Hook

A hook refers to specific points (or checkpoints) in a component’s lifecycle where Angular allows you to run custom logic.

So in simple terms:

«Hooks are the “entry points” into different stages of a component’s lifecycle.»

---

What is Angular Lifecycle Hook?

An Angular lifecycle hook is a set of special methods that allow you to tap into different stages of a component’s life.

A component lifecycle begins when:

• Angular creates (instantiates) a component class
• Renders the component view and its child views

It continues with:

• Change detection (when Angular checks for data updates)
• Updates to the view when data-bound properties change

Finally, the lifecycle ends when:

• Angular destroys the component
• Removes it from the DOM (Document Object Model)

«NB: Directives can also have lifecycle hooks.»

---

List of Angular Lifecycle Hooks

Angular provides the following lifecycle hooks:

- "ngOnChanges()"
- "ngOnInit()"
- "ngDoCheck()"
- "ngAfterContentInit()"
- "ngAfterContentChecked()"
- "ngAfterViewInit()"
- "ngAfterViewChecked()"
- "ngOnDestroy()"

---

Most Important Lifecycle Hooks You Should Know

Although Angular provides many lifecycle hooks, you will mostly use just a few in real projects.

---

1. ngOnChanges()

This hook is called whenever input-bound properties of a component change.

When to use it:

• When you want to respond to changes in input data coming from a parent component.

---

2.ngOnInit()

This is one of the most commonly used lifecycle hooks.

It runs once after the component is initialized.

Typical use cases:

• Fetching data from APIs
• Initial setup logic
• Component initialization tasks

---

Execution Flow Insight

When a component is created, Angular follows this order:

1. Class is instantiated
2. Constructor is called
3. Angular sets input properties 4."ngOnInit()" is called

---

Constructor vs ngOnInit

• Constructor: Used for basic class setup and dependency injection
• ngOnInit: Used for initialization logic that depends on Angular bindings

---

Simple Explanation:

When you create a component:

• Angular first creates the class
• Then runs the constructor
• Then sets up input properties
• Finally runs "ngOnInit"

That is why "ngOnInit()" is called after the constructor.

---

1. ngOnDestroy()

This hook is called just before Angular destroys a component.

When to use it:

• Cleaning up subscriptions
• Clearing timers
• Preventing memory leaks

---

Why ngOnDestroy is Important

If you don’t clean up properly, your application may:

• Consume unnecessary memory
• Continue running background processes
• Cause performance issues

"ngOnDestroy()" helps prevent this.

---

Summary of Lifecycle Flow

Here is a simplified lifecycle flow:

1. Component is created
2. Constructor runs
3. Angular initializes inputs
4. "ngOnInit()" runs
5. Component updates (change detection)
6. Component is destroyed → "ngOnDestroy()" runs

---

Conclusion

Angular lifecycle hooks help you control what happens at different stages of a component’s life.

Although Angular provides many hooks, the most important ones you will use daily are:

- "ngOnInit()"
- "ngOnChanges()"
- "ngOnDestroy()"

Understanding these three will already allow you to build better and more efficient Angular applications.

Keep practicing, and these concepts will become second nature.

Happy Coding 🚀