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.