TrackBy in ngFor in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a trackBy function to the ngFor directive.

Angular

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

Drag options to blanks, or click blank then click option'

AtrackById

BtrackByFn

CtrackByIndex

DtrackByValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that is not defined in the component.

Forgetting to add the trackBy function altogether.

The trackBy function helps Angular track items by a unique identifier, improving performance. Here, trackById is the function name used.

2fill in blank

medium

Complete the trackBy function to return the unique id of the item.

Angular

trackById(index: number, item: any): number {
  return [1];
}

Drag options to blanks, or click blank then click option'

Aindex

Bitem.name

Citem.id

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the index instead of a unique id.

Returning the whole item object.

The trackBy function should return a unique identifier for each item. Returning item.id ensures Angular can track items efficiently.

3fill in blank

hard

Fix the error in the trackBy function to correctly return the unique id.

Angular

trackById(index: number, item: any): number {
  return [1];
}

Drag options to blanks, or click blank then click option'

Aindex

Bitem['id']

Citem.id()

Ditem.id

Attempts:

3 left

💡 Hint

Common Mistakes

Calling item.id() as if it were a function.

Returning the index instead of the id.

The correct way to access the id property is item.id. Using item.id() calls a function which does not exist and causes an error.

4fill in blank

hard

Fill both blanks to complete the ngFor with trackBy and the trackBy function definition.

Angular

<div *ngFor="let user of users; trackBy: [1]">{{user.name}}</div>

[2] trackById(index: number, user: any): number {
  return user.id;
}

Drag options to blanks, or click blank then click option'

AtrackById

Bfunction

Cconst

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name in the template and component.

Using const or let incorrectly for function declaration.

The trackBy directive uses the trackById function. The function is declared with the function keyword in the component.

5fill in blank

hard

Fill all three blanks to create a trackBy function that tracks by user id and use it in ngFor.

Angular

<ul>
  <li *ngFor="let user of users; trackBy: [1]">{{user.name}}</li>
</ul>

[2] trackById([3]: number, user: any): number {
  return user.id;
}

Drag options to blanks, or click blank then click option'

AtrackById

Bindex

Cfunction

DuserId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different parameter name than index.

Not matching the function name in the template and component.

The trackBy directive uses the trackById function. The function is declared with the function keyword and takes index as the first parameter.