*ngFor for list rendering in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of *ngFor in Angular?

*ngFor is a directive used to repeat a block of HTML for each item in a list or array. It helps display lists dynamically.

beginner

How do you write a basic *ngFor loop to display items from an array called items?

<pre>&lt;li *ngFor="let item of items"&gt;{{ item }}&lt;/li&gt;</pre><p>This repeats the &lt;li&gt; element for each <code>item</code> in <code>items</code>.</p>

beginner

What does the keyword <code>let</code> mean in <code>*ngFor="let item of items"</code>?

let declares a local variable item that holds the current element from the items array during each iteration.

intermediate

How can you access the index of the current item in an *ngFor loop?

<pre>&lt;li *ngFor="let item of items; let i = index"&gt;{{ i }} - {{ item }}&lt;/li&gt;</pre><p>The <code>index</code> keyword gives the zero-based position of the current item.</p>

advanced

Why is it important to use trackBy with *ngFor in large lists?

trackBy helps Angular identify items uniquely to optimize rendering and avoid unnecessary DOM updates, improving performance.

What does *ngFor="let item of items" do in Angular?

A Deletes items from the array

B Creates a new component for each item

C Repeats the HTML element for each item in the items array

D Sorts the items array

*ngFor repeats the element for each item in the array, rendering a list.

How do you get the current index inside an *ngFor loop?

A Using <code>let i = index</code>

B Using <code>let i = position</code>

C Using <code>let i = count</code>

D Using <code>let i = number</code>

The keyword index gives the current zero-based index.

What is the role of trackBy in *ngFor?

A To sort items alphabetically

B To filter items in the list

C To add animations to list items

D To uniquely identify items for better rendering performance

trackBy helps Angular track items uniquely to avoid re-rendering unchanged elements.

Which of these is the correct syntax to loop over an array users with *ngFor?

A <code>*ngFor="users let user"</code>

B <code>*ngFor="let user of users"</code>

C <code>*ngFor="user for users"</code>

D <code>*ngFor="users in user"</code>

The correct syntax is let variable of array.

What happens if you forget to use let in *ngFor?

A Angular will throw a syntax error

B The loop will run but variables will be undefined

C The loop will run normally

D Angular will ignore the loop

let is required to declare the loop variable; missing it causes a syntax error.

Explain how *ngFor works to render lists in Angular. Include how to access the current item and its index.

Think about how you would show a list of names with their position numbers.

Describe why using trackBy with *ngFor can improve performance in Angular applications.

Imagine updating a long list where only one item changes.

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