The Component Lifecycle

Master the sequence of events in an Angular component. Learn when to initialize data, when to access the DOM, and how to prevent memory leaks.

Lifecycle SimulationStep 1 of 7
Constructor
⬇️
ngOnInit
⬇️
ngAfterViewInit
⬇️
ngOnDestroy
⭐ 0 EXP

Welcome! Angular components have a lifecycle managed by Angular itself. Let's visualize the journey of a component.

// The Component Lifecycle begins

Creation Phase: Constructor vs. ngOnInit

The `constructor` is a standard TypeScript class feature called when Angular creates the component instance. It should strictly be used for Dependency Injection.

`ngOnInit` is the first Lifecycle hook triggered by Angular. It runs after the constructor and after input properties have been set. This is where you should put your initialization logic, like calling HTTP services.

System Check

If you try to access an @Input() property inside the constructor, what will be the result?

Advanced Holo-Simulations

⭐ 0 EXP

Apply your knowledge in these advanced simulations. All our content is free!

Achievements

🏗️
Lifecycle Architect

Correctly organize the major Angular lifecycle hooks in order.

🚿
Memory Leak Plumber

Implement ngOnDestroy to clean up subscriptions.

🚀
Init Expert

Distinguish between Constructor and ngOnInit usage.

Mission: Safe Subscription Handling

Create a component class that implements `OnInit` and `OnDestroy`. Initialize a subscription and safely clean it up.

A.D.A. Feedback:

> Awaiting input...

Challenge: Chronological Order

Drag the lifecycle hooks into the order they are called by Angular.

ngOnInit()
ngOnDestroy()
constructor()
ngAfterViewInit()
ngAfterContentInit()

Challenge: Syntax & Purpose

Fill in the missing lifecycle methods based on the context.

To fetch data when the component starts, use. To prevent memory leaks when the component is removed, use.

Consult A.D.A. (Angular Droid Assistant)

Community Holo-Net

Peer Project Review

Submit your "Memory Leak Prevention" snippet for feedback.

Support Us

Mastering the Angular Component Lifecycle

[Image of Angular Lifecycle Flowchart]

In Angular, a component isn't just a static block of code. It is a living entity that is created, updated, and destroyed. Angular exposes key moments in this process via Lifecycle Hooks. Understanding these hooks is what separates a beginner from an expert who can write efficient, bug-free code.

The "Big Three": Constructor vs. OnInit vs. OnDestroy

One of the most common interview questions and sources of confusion is:"Why use ngOnInit if we have a constructor?"

Constructor

  • A standard TypeScript feature (not Angular specific).
  • Called when the class is instantiated.
  • Use only for Dependency Injection.
  • Inputs (@Input) are undefined here.

ngOnInit

  • Specific to Angular.
  • Called after the first `ngOnChanges`.
  • Use for logic and data fetching.
  • Inputs are available and ready to use.

Navigating the View: ngAfterViewInit

Sometimes you need to interact directly with the DOM (e.g., drawing on a Canvas or initializing a jQuery plugin). You cannot do this in `ngOnInit` because the template hasn't been rendered yet.

ngAfterViewInit is the hook for this. It guarantees that the component's view and its children's views are fully initialized. However, be warned: modifying data bound properties here will trigger the infamous ExpressionChangedAfterItHasBeenCheckedError, because Angular has already completed its change detection cycle for the view.

The Silent Killer: Memory Leaks

Single Page Applications (SPAs) stay loaded in the browser for a long time. If you subscribe to an Observable (like a timer or a global state service) and don't unsubscribe, that subscription keeps running even after the user navigates away.

Key Takeaway: Always implement the OnDestroy interface and put your cleanup logic (unsubscribing, detaching event listeners) inside ngOnDestroy(). This ensures your app stays fast and doesn't crash the browser over time.

Angular Lifecycle Glossary

ngOnChanges()
Called before `ngOnInit()` and whenever one or more data-bound input properties change. It receives a SimpleChanges object containing current and previous values.
ngOnInit()
Called once after the first `ngOnChanges()`. This is the place for initialization logic and HTTP requests.
ngDoCheck()
Called immediately after `ngOnChanges()` on every change detection run. It allows you to detect and act upon changes that Angular can't or won't detect on its own.
ngAfterContentInit()
Called once after Angular projects external content into the component's view (content projection/ng-content).
ngAfterContentChecked()
Called after Angular checks the content projected into the component.
ngAfterViewInit()
Called once after Angular initializes the component's views and child views.
ngAfterViewChecked()
Called after Angular checks the component's views and child views.
ngOnDestroy()
Called immediately before Angular destroys the component. Used for cleanup (unsubscribing from Observables, detaching event handlers) to prevent memory leaks.

About the Author

Author's Avatar

TodoTutorial Team

Angular GDEs and Senior Frontend Architects dedicated to learning excellence.

This lesson was crafted by engineers with deep experience in enterprise Angular applications, ensuring real-world relevance and adherence to the latest Angular style guides.

Verification and Updates

Last reviewed: October 2025.

Checked against Angular 17+ Signals and Standalone Components compatibility.

External Resources

Found an error or have a suggestion? Contact us!