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.

Practice

1. What does the Angular directive *ngFor="let item of items" do in a template?

easy

A. It repeats the HTML element for each item in the list called 'items'.

B. It creates a single HTML element and ignores the list.

C. It deletes all items from the list.

D. It sorts the list before displaying.

Solution

1. Step 1: Understand the directive purpose

   The *ngFor directive is used to repeat an HTML element for each item in a list.

2. Step 2: Analyze the syntax

   The syntax let item of items means for each element in the list 'items', create a copy of the element with 'item' as the current element.

3. Final Answer:

   It repeats the HTML element for each item in the list called 'items'. -> Option A

4. Quick Check:

   *ngFor repeats elements = A [OK]

Hint: Remember *ngFor repeats elements for each list item [OK]

Common Mistakes:

• Thinking *ngFor modifies the list itself
• Confusing *ngFor with event binding
• Assuming it creates only one element

2. Which of the following is the correct syntax to use *ngFor to loop over a list named fruits?

easy

A. *ngFor="let fruit in fruits"

B. *ngFor="fruits as fruit"

C. *ngFor="fruit of fruits"

D. *ngFor="let fruit of fruits"

Solution

1. Step 1: Recall correct Angular syntax

   The correct syntax for *ngFor uses let variable of list to iterate over the list.

2. Step 2: Compare options

   *ngFor="let fruit of fruits" uses let fruit of fruits, which matches the correct syntax. *ngFor="let fruit in fruits" uses 'in' which is incorrect in Angular templates.

3. Final Answer:

   *ngFor="let fruit of fruits" -> Option D

4. Quick Check:

   Use 'of' not 'in' in *ngFor syntax = B [OK]

Hint: Use 'let item of list' syntax for *ngFor loops [OK]

Common Mistakes:

• Using 'in' instead of 'of'
• Omitting 'let' keyword
• Swapping variable and list positions

3. Given the component code:

items = ['apple', 'banana', 'cherry'];

And the template:

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

What will be the rendered HTML output?

medium

A. fruitfruitfruit

B. items

C. applebananacherry

D.

Solution

1. Step 1: Understand the list and template

   The list 'items' contains three strings: 'apple', 'banana', and 'cherry'. The template uses *ngFor to create a
2. for each fruit.

3. Step 2: Render each item

   Each
4. will display the current fruit's name. So the output is three
5. elements with the fruit names inside a <ul>.

6. Final Answer:

   <ul><li>apple</li><li>banana</li><li>cherry</li></ul> -> Option C

7. Quick Check:

   *ngFor creates one element per list item = C [OK]

Hint: Each list item creates one repeated element [OK]

Common Mistakes:

• Expecting variable names instead of values
• Thinking *ngFor outputs the list name
• Missing the repeated elements

4. What is wrong with this Angular template snippet?

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

medium

A. The list 'items' is not defined.

B. The variable declaration is missing 'let' before 'item'.

C. The interpolation syntax {{ item }} is incorrect.

D. The *ngFor directive cannot be used on a <div> element.

Solution

1. Step 1: Check *ngFor syntax

   The correct syntax requires 'let' before the loop variable, so it should be *ngFor="let item of items".

2. Step 2: Verify other parts

   The interpolation {{ item }} is correct, and *ngFor can be used on any element including <div>. The question does not mention if 'items' is defined, so we assume it is.

3. Final Answer:

   The variable declaration is missing 'let' before 'item'. -> Option B

4. Quick Check:

   Always use 'let' before variable in *ngFor = A [OK]

Hint: Always write 'let' before the variable in *ngFor [OK]

Common Mistakes:

• Omitting 'let' keyword
• Assuming *ngFor needs special elements
• Confusing interpolation syntax

5. You have a list of users with some having empty names:

users = [{name: 'Alice'}, {name: ''}, {name: 'Bob'}, {name: null}];

How can you use *ngFor to render only users with a non-empty, non-null name?

hard

A. *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div>

B. *ngFor="let user of users | filter: user.name"

C. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div>

D. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container>

Solution

1. Step 1: Understand filtering in template

   Angular's *ngFor does not support filtering directly. We use *ngIf inside the loop to conditionally show elements.

2. Step 2: Check conditions for non-empty names

   Using *ngIf="user.name" filters out empty strings and null values because they are falsy in Angular templates.

3. Step 3: Compare options

   *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> correctly uses *ngIf="user.name" inside the loop. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container> has invalid syntax mixing *ngFor and *ngIf on the same element. *ngFor="let user of users | filter: user.name" uses a non-existent filter pipe. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div> misses filtering null values.

4. Final Answer:

   *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> -> Option A

5. Quick Check:

   Use *ngIf inside *ngFor to filter falsy names = D [OK]

Hint: Use *ngIf inside *ngFor to skip empty or null items [OK]

Common Mistakes:

• Trying to filter list directly in *ngFor
• Using invalid syntax combining *ngFor and *ngIf
• Not filtering null values properly