*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.