Why *ngFor for list rendering in Angular? - Purpose & Use Cases

The Big Idea

Discover how a simple Angular directive can save you hours of tedious HTML rewriting!

The Scenario

Imagine you have a list of 10 items to show on a webpage, and you write HTML code for each item by hand.

Now, what if the list grows to 100 or changes often? You would have to update the HTML manually every time.

The Problem

Manually writing HTML for each list item is slow and boring.

It is easy to make mistakes like forgetting to update some items or breaking the layout.

Also, it does not handle changes in the list well, so your page can become outdated or inconsistent.

The Solution

The *ngFor directive in Angular automatically repeats a block of HTML for each item in a list.

This means you write the HTML once, and Angular creates the right number of items for you.

When the list changes, Angular updates the page smoothly without you doing extra work.

Before vs After

✗ Before

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

✓ After

<li *ngFor="let item of items">{{ item }}</li>

What It Enables

You can easily display dynamic lists that update automatically as your data changes, making your app faster and easier to maintain.

Real Life Example

Think of a shopping app showing a list of products. When new products arrive or some sell out, the list updates instantly without rewriting HTML.

Key Takeaways

*ngFor saves time by generating list items automatically.

It reduces errors by keeping HTML consistent and linked to data.

It makes your app responsive to data changes without manual updates.