*ngFor for list rendering in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of *ngFor in Angular?

*ngFor is a directive used to repeat a block of HTML for each item in a list or array. It helps display lists dynamically.

beginner

How do you write a basic *ngFor loop to display items from an array called items?

<pre>&lt;li *ngFor="let item of items"&gt;{{ item }}&lt;/li&gt;</pre><p>This repeats the &lt;li&gt; element for each <code>item</code> in <code>items</code>.</p>

beginner

What does the keyword <code>let</code> mean in <code>*ngFor="let item of items"</code>?

let declares a local variable item that holds the current element from the items array during each iteration.

intermediate

How can you access the index of the current item in an *ngFor loop?

<pre>&lt;li *ngFor="let item of items; let i = index"&gt;{{ i }} - {{ item }}&lt;/li&gt;</pre><p>The <code>index</code> keyword gives the zero-based position of the current item.</p>

advanced

Why is it important to use trackBy with *ngFor in large lists?

trackBy helps Angular identify items uniquely to optimize rendering and avoid unnecessary DOM updates, improving performance.

What does *ngFor="let item of items" do in Angular?

A Deletes items from the array

B Creates a new component for each item

C Repeats the HTML element for each item in the items array

D Sorts the items array

*ngFor repeats the element for each item in the array, rendering a list.

How do you get the current index inside an *ngFor loop?

A Using <code>let i = index</code>

B Using <code>let i = position</code>

C Using <code>let i = count</code>

D Using <code>let i = number</code>

The keyword index gives the current zero-based index.

What is the role of trackBy in *ngFor?

A To sort items alphabetically

B To filter items in the list

C To add animations to list items

D To uniquely identify items for better rendering performance

trackBy helps Angular track items uniquely to avoid re-rendering unchanged elements.

Which of these is the correct syntax to loop over an array users with *ngFor?

A <code>*ngFor="users let user"</code>

B <code>*ngFor="let user of users"</code>

C <code>*ngFor="user for users"</code>

D <code>*ngFor="users in user"</code>

The correct syntax is let variable of array.

What happens if you forget to use let in *ngFor?

A Angular will throw a syntax error

B The loop will run but variables will be undefined

C The loop will run normally

D Angular will ignore the loop

let is required to declare the loop variable; missing it causes a syntax error.

Explain how *ngFor works to render lists in Angular. Include how to access the current item and its index.

Think about how you would show a list of names with their position numbers.

Describe why using trackBy with *ngFor can improve performance in Angular applications.

Imagine updating a long list where only one item changes.