*ngFor for list rendering in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Angular template?

Given the component's items array and the template below, what will be the rendered output inside the <ul> element?

Angular

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

Template:
<ul>
  <li *ngFor="let item of items; let i = index">{{i}}: {{item}}</li>
</ul>

A <ul><li>0: apple</li><li>1: banana</li><li>2: cherry</li></ul>

B <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

C <ul><li>0: apple</li><li>0: banana</li><li>0: cherry</li></ul>

D <ul><li>1: apple</li><li>2: banana</li><li>3: cherry</li></ul>

💡 Hint

Remember that index starts at 0 and is assigned to i.

The *ngFor directive loops over items. The index variable starts at 0, so each <li> shows the index and the item. Option A matches this exactly.

📝 Syntax

intermediate

Which option correctly uses *ngFor with a trackBy function?

You want to optimize list rendering by using a trackBy function named trackById. Which template syntax is correct?

A <li *ngFor="let item of items; trackBy: trackById()">{{item.name}}</li>

B <li *ngFor="let item of items; trackByBy: trackById">{{item.name}}</li>

C <li *ngFor="let item of items; trackBy: trackById">{{item.name}}</li>

D <li *ngFor="let item of items; trackBy=trackById">{{item.name}}</li>

💡 Hint

The trackBy syntax uses a colon, not an equals sign or parentheses.

The correct syntax for trackBy in *ngFor is trackBy: functionName without parentheses. Option C uses this correctly.

🔧 Debug

advanced

Why does this *ngFor code cause a runtime error?

Consider this template snippet:

• User: {{user.name}}, Odd: {{odd}}

The component has users = [{name: 'Anna'}, {name: 'Bob'}]; What is the cause of the runtime error?

A The <code>user</code> variable is not declared properly.

B The <code>users</code> array is empty, so <code>*ngFor</code> fails.

C The syntax should use <code>let isOdd = odd</code> instead of <code>let odd = odd</code>.

D <code>let odd = odd</code> is invalid because <code>odd</code> conflicts with the predefined <code>*ngFor</code> local variable.

💡 Hint

Check the list of valid local variables *ngFor supports.

*ngFor supports index, first, last, even, and odd as local variables. However, you cannot assign let odd = odd because odd is a reserved keyword in this context. You must use a different variable name like let isOdd = odd.

❓ state_output

advanced

What is the value of selectedItem after this template interaction?

Given this component code and template: Component: selectedItem = null; items = ['red', 'green', 'blue']; Template:

• {{color}}

Selected: {{selectedItem}}

If the user clicks the second <li> (green), what is displayed in the paragraph?

A Selected: red

B Selected: green

C Selected: blue

D Selected: null

💡 Hint

Clicking an item sets selectedItem to that item's value.

Clicking the second <li> sets selectedItem to 'green'. The paragraph then shows 'Selected: green'.

🧠 Conceptual

expert

Which statement about *ngFor and change detection is true?

Consider Angular's change detection and the *ngFor directive. Which statement correctly explains how trackBy affects performance?

A Using <code>trackBy</code> prevents Angular from recreating DOM elements when the list changes if the tracked identity stays the same.

B <code>trackBy</code> forces Angular to recreate all DOM elements every time the list changes.

C Without <code>trackBy</code>, Angular never updates the DOM when the list changes.

D <code>trackBy</code> disables Angular's change detection for the entire component.

💡 Hint

Think about how Angular identifies list items to optimize rendering.

trackBy helps Angular identify items uniquely, so it can reuse existing DOM elements instead of recreating them, improving performance.

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