TrackBy in ngFor in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does trackBy affect ngFor rendering?

Consider an Angular component that renders a list of items using ngFor. What is the main effect of adding a trackBy function?

Angular

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

trackById(index: number, item: any) {
  return item.id;
}

A Angular reuses existing DOM elements for items with the same <code>id</code>, improving performance.

B Angular always recreates all DOM elements regardless of <code>trackBy</code>, so no performance change.

C Angular removes all items and then adds new ones, ignoring the <code>trackBy</code> function.

D Angular sorts the list automatically based on the <code>trackBy</code> return value.

💡 Hint

Think about how Angular decides which DOM elements to keep or recreate when the list changes.

The trackBy function helps Angular identify items uniquely, so it can reuse DOM elements for items with the same identity. This reduces unnecessary DOM updates and improves rendering performance.

📝 Syntax

intermediate

Identify the correct trackBy function syntax

Which of the following trackBy function definitions is syntactically correct in Angular?

A trackByFn: (index, item) => { item.id }

B trackByFn(index, item) => item.id;

C trackByFn(index: number, item: any) { return item.id; }

D trackByFn(index: number, item: any) => { return item.id; }

💡 Hint

Remember the correct way to define a method in an Angular component class.

Option C defines a method with proper TypeScript syntax inside a class. Options B and D use arrow function syntax incorrectly for class methods, and A lacks a return statement.

🔧 Debug

advanced

Why does the trackBy function not prevent re-rendering?

Given this trackBy function, why does Angular still recreate all DOM elements when the list updates?

trackByFn(index: number, item: any) {
  return index;
}

A Because returning <code>index</code> causes Angular to treat all items as new when the list order changes.

B Because the function must return the entire <code>item</code> object, not just a property.

C Because <code>trackBy</code> functions cannot use the <code>index</code> parameter.

D Because the function is missing a return type declaration.

💡 Hint

Think about what happens if the list order changes but the trackBy returns the position.

Returning the index means Angular identifies items by their position. If the list order changes, Angular thinks all items are different and recreates DOM elements. Returning a unique item property like id avoids this.

❓ state_output

advanced

What is the rendered output after updating the list with trackBy?

Given this component code, what will be the content of the rendered list after updating items?

items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
];

// Later update
this.items = [
  { id: 2, name: 'Banana' },
  { id: 1, name: 'Apple' }
];

trackByFn(index: number, item: any) { return item.id; }

Angular

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

A <li>Banana</li><li>Banana</li>

B <li>Apple</li><li>Banana</li>

C <li>Apple</li><li>Apple</li>

D <li>Banana</li><li>Apple</li>

💡 Hint

Look at the updated items array order and how trackBy identifies items.

The list order changed, but trackByFn returns item.id, so Angular reuses DOM elements and updates their order. The rendered list shows Banana first, then Apple.

🧠 Conceptual

expert

Why is trackBy important in large dynamic lists?

In an Angular app with a large list that updates frequently, why is using a proper trackBy function critical?

A It automatically sorts the list items alphabetically to improve user experience.

B It prevents Angular from recreating all DOM elements, reducing rendering time and improving app responsiveness.

C It disables change detection for the list, so Angular never updates the DOM.

D It caches the list data on the server to reduce network requests.

💡 Hint

Think about how Angular updates the DOM when lists change and the cost of recreating many elements.

Using trackBy helps Angular identify which items changed, so it only updates those DOM elements. This avoids costly full list re-renders, making the app faster and smoother.

Practice

1. What is the main purpose of using trackBy in an ngFor directive in Angular?

easy

A. To improve performance by uniquely identifying list items during updates

B. To style list items differently based on their index

C. To sort the list items before rendering

D. To filter out duplicate items from the list

Solution

1. Step 1: Understand what ngFor does

   ngFor repeats a template for each item in a list, rendering them in the view.

2. Step 2: Identify the role of trackBy

   trackBy helps Angular know which items changed by uniquely identifying them, so it only updates those items instead of re-rendering the whole list.

3. Final Answer:

   To improve performance by uniquely identifying list items during updates -> Option A

4. Quick Check:

   TrackBy improves performance = C [OK]

Hint: TrackBy helps Angular track items uniquely for faster updates [OK]

Common Mistakes:

• Thinking trackBy sorts or filters items
• Believing trackBy changes item styles
• Assuming trackBy removes duplicates

2. Which of the following is the correct syntax to use trackBy in an ngFor loop?

easy

A. *ngFor="let item of items; trackByFn"

B. *ngFor="let item of items; trackBy: trackByFn"

C. *ngFor="let item of items; trackByFn()"

D. *ngFor="let item of items; trackBy=trackByFn()"

Solution

1. Step 1: Recall the correct ngFor syntax with trackBy

   The correct syntax uses a semicolon and the keyword trackBy followed by the function name without parentheses.

2. Step 2: Compare options

   *ngFor="let item of items; trackBy: trackByFn" matches the correct syntax: *ngFor="let item of items; trackBy: trackByFn". Others either miss the keyword or use parentheses incorrectly.

3. Final Answer:

   *ngFor="let item of items; trackBy: trackByFn" -> Option B

4. Quick Check:

   Correct syntax includes 'trackBy:' keyword [OK]

Hint: Use 'trackBy:' keyword with function name, no parentheses [OK]

Common Mistakes:

• Omitting 'trackBy:' keyword
• Adding parentheses after function name
• Using '=' instead of ':'

3. Given the component code below, what will be logged when the items array is updated by adding a new item?

items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];

trackByFn(index: number, item: any) {
  return item.id;
}

Template:

<div *ngFor="let item of items; trackBy: trackByFn">{{item.name}}</div>

medium

A. Rendering throws an error due to trackBy function

B. All items are re-rendered and logged

C. No items are rendered

D. Only the new item is rendered and logged

Solution

1. Step 1: Understand how trackBy works with unique IDs

   The trackByFn returns the unique id of each item, so Angular can track items by their IDs.

2. Step 2: Effect of adding a new item

   When a new item is added, Angular uses trackByFn to detect only the new item and renders just that one, not the entire list.

3. Final Answer:

   Only the new item is rendered and logged -> Option D

4. Quick Check:

   trackBy with unique ID renders only changed items [OK]

Hint: trackBy returns unique id to render only changed items [OK]

Common Mistakes:

• Assuming all items re-render on update
• Thinking trackBy causes errors if function returns id
• Believing no items render after update

4. Identify the error in the following trackBy function used in an ngFor loop:

trackByFn(index: number, item: any) {
  return index + 1;
}

medium

A. It returns a non-unique value causing incorrect tracking

B. It returns the index which is acceptable and error-free

C. It throws a syntax error due to missing return type

D. It causes Angular to ignore the trackBy function

Solution

1. Step 1: Analyze the returned value from trackByFn

   The function returns index + 1, which changes if the list order changes or items are added/removed.

2. Step 2: Understand why this causes problems

   Returning a value based on index is not stable for tracking because indexes shift, causing Angular to think items changed incorrectly.

3. Final Answer:

   It returns a non-unique value causing incorrect tracking -> Option A

4. Quick Check:

   trackBy must return stable unique IDs, not shifting indexes [OK]

Hint: trackBy must return stable unique IDs, not changing indexes [OK]

Common Mistakes:

• Thinking index is always safe to return
• Ignoring that indexes shift on list changes
• Assuming missing return type causes syntax error

5. You have a list of users with possible duplicate names but unique IDs. You want to optimize rendering with trackBy. Which trackBy function below correctly handles this scenario to avoid unnecessary re-renders when the list updates?

hard

A. trackByFn(index: number, user: any) { return user.name; }

B. trackByFn(index: number, user: any) { return index; }

C. trackByFn(index: number, user: any) { return user.id; }

D. trackByFn(index: number, user: any) { return user; }

Solution

1. Step 1: Identify the unique property for tracking

   Users may have duplicate names, so using user.name is not reliable. The unique user.id is the best choice.

2. Step 2: Evaluate each option

   A uses user.name (not unique), B uses user.id (stable and unique), C uses index (unstable), D returns the whole user object (not recommended).

3. Final Answer:

   trackByFn(index: number, user: any) { return user.id; } -> Option C

4. Quick Check:

   Use unique IDs for trackBy to avoid re-renders [OK]

Hint: Always trackBy unique stable IDs, not names or indexes [OK]

Common Mistakes:

• Using non-unique properties like names
• Using index which changes on list updates
• Returning the whole object causing errors