TrackBy in ngFor in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the trackBy function in ngFor?

The trackBy function helps Angular identify items in a list uniquely, so it can efficiently update only the changed items instead of re-rendering the whole list.

beginner

How do you define a trackBy function in Angular?

A trackBy function takes two arguments: the index and the item. It returns a unique identifier (like an ID) for each item to help Angular track it.

intermediate

Why is using trackBy important for large lists?

Using trackBy improves performance by preventing Angular from recreating all DOM elements when the list changes. It updates only the changed items, saving time and resources.

intermediate

What happens if you don't use trackBy with ngFor?

Without trackBy, Angular treats every change as a new list and recreates all DOM elements, which can cause slow rendering and loss of element state like input focus.

beginner

Show a simple example of a trackBy function for a list of users with unique id properties.

Example:<br>

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

What does the trackBy function return?

A A boolean value

B A unique identifier for each item

C The index only

D The whole item object

The trackBy function returns a unique identifier (like an ID) to help Angular track each item.

Why should you use trackBy with ngFor?

A To add animations

B To sort the list automatically

C To filter items in the list

D To improve rendering performance by tracking items uniquely

trackBy helps Angular update only changed items, improving performance.

What arguments does a trackBy function receive?

A Index and item

B Only the item

C Only the index

D No arguments

The trackBy function receives the index and the item as arguments.

If you don't use trackBy, what might happen when the list changes?

A Angular recreates all DOM elements

B Angular updates only changed items

C Angular throws an error

D Nothing happens

Without trackBy, Angular recreates all DOM elements, which can slow down the app.

Which of these is a valid trackBy function signature?

A () => number

B (item: any) => void

C (index: number, item: any) => any

D (index: string) => string

The trackBy function takes index and item and returns a unique value.

Explain how the trackBy function improves performance in Angular's ngFor directive.

Think about how Angular updates the list in the browser.

Describe how to write a trackBy function for a list of objects with unique IDs.

Focus on the function signature and return value.