*ngFor for list rendering in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render each item in the list using *ngFor.

Angular

<ul>
  <li *ngFor="let item [1] items">{{item}}</li>
</ul>

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

Aof

Bin

Cfrom

Dwith

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'in' instead of 'of' causes an error.

Using 'from' or 'with' are not valid in *ngFor.

The *ngFor directive uses of to loop over the list items.

2fill in blank

medium

Complete the code to get the index of each item in the list.

Angular

<ul>
  <li *ngFor="let item of items; [1] = index">{{index}} - {{item}}</li>
</ul>

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

Alet idx

Blet count

Clet i

Dlet index

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names other than 'index' without assignment causes errors.

Forgetting the 'let' keyword.

Use let index = index to get the current index in the loop.

3fill in blank

hard

Fix the error in the *ngFor syntax to correctly loop over the list.

Angular

<div *ngFor="let item [1] items; let idx = index">
  {{idx}}: {{item}}
</div>

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

Afrom

Bin

Cof

Don

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'in' or 'from' causes syntax errors.

Using 'on' is invalid in *ngFor.

The correct keyword to loop over a list in Angular's *ngFor is of.

4fill in blank

hard

Fill both blanks to display the first and last item flags in the list.

Angular

<ul>
  <li *ngFor="let item of items; let first = [1]; let last = [2]">
    {{item}} <span *ngIf="first">(First)</span><span *ngIf="last">(Last)</span>
  </li>
</ul>

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

Afirst

Blast

Cindex

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'index' or 'count' instead of 'first' or 'last'.

Forgetting to assign the variables with 'let'.

Use let first = first and let last = last to get flags for first and last items.

5fill in blank

hard

Fill all three blanks to create a dictionary of item indexes and values for items longer than 3 characters.

Angular

const result = {
  [1]: [2] for (let [3] = 0; [3] < items.length; [3]++) {
    if (items[[3]].length > 3) {
      [[3]]: items[[3]]
    }
  }
};

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

Aindex

Bvalue

Ci

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'key' instead of 'index' for the dictionary key.

Using a loop variable other than 'i'.

Use index and value as keys and values, and i as the loop variable.

Practice

1. What does the Angular directive *ngFor="let item of items" do in a template?

easy

A. It repeats the HTML element for each item in the list called 'items'.

B. It creates a single HTML element and ignores the list.

C. It deletes all items from the list.

D. It sorts the list before displaying.

Solution

1. Step 1: Understand the directive purpose

   The *ngFor directive is used to repeat an HTML element for each item in a list.

2. Step 2: Analyze the syntax

   The syntax let item of items means for each element in the list 'items', create a copy of the element with 'item' as the current element.

3. Final Answer:

   It repeats the HTML element for each item in the list called 'items'. -> Option A

4. Quick Check:

   *ngFor repeats elements = A [OK]

Hint: Remember *ngFor repeats elements for each list item [OK]

Common Mistakes:

• Thinking *ngFor modifies the list itself
• Confusing *ngFor with event binding
• Assuming it creates only one element

2. Which of the following is the correct syntax to use *ngFor to loop over a list named fruits?

easy

A. *ngFor="let fruit in fruits"

B. *ngFor="fruits as fruit"

C. *ngFor="fruit of fruits"

D. *ngFor="let fruit of fruits"

Solution

1. Step 1: Recall correct Angular syntax

   The correct syntax for *ngFor uses let variable of list to iterate over the list.

2. Step 2: Compare options

   *ngFor="let fruit of fruits" uses let fruit of fruits, which matches the correct syntax. *ngFor="let fruit in fruits" uses 'in' which is incorrect in Angular templates.

3. Final Answer:

   *ngFor="let fruit of fruits" -> Option D

4. Quick Check:

   Use 'of' not 'in' in *ngFor syntax = B [OK]

Hint: Use 'let item of list' syntax for *ngFor loops [OK]

Common Mistakes:

• Using 'in' instead of 'of'
• Omitting 'let' keyword
• Swapping variable and list positions

3. Given the component code:

items = ['apple', 'banana', 'cherry'];

And the template:

<ul>
  <li *ngFor="let fruit of items">{{ fruit }}</li>
</ul>

What will be the rendered HTML output?

medium

A. fruitfruitfruit

B. items

C. applebananacherry

D.

Solution

1. Step 1: Understand the list and template

   The list 'items' contains three strings: 'apple', 'banana', and 'cherry'. The template uses *ngFor to create a
2. for each fruit.

3. Step 2: Render each item

   Each
4. will display the current fruit's name. So the output is three
5. elements with the fruit names inside a <ul>.

6. Final Answer:

   <ul><li>apple</li><li>banana</li><li>cherry</li></ul> -> Option C

7. Quick Check:

   *ngFor creates one element per list item = C [OK]

Hint: Each list item creates one repeated element [OK]

Common Mistakes:

• Expecting variable names instead of values
• Thinking *ngFor outputs the list name
• Missing the repeated elements

4. What is wrong with this Angular template snippet?

<div *ngFor="item of items">{{ item }}</div>

medium

A. The list 'items' is not defined.

B. The variable declaration is missing 'let' before 'item'.

C. The interpolation syntax {{ item }} is incorrect.

D. The *ngFor directive cannot be used on a <div> element.

Solution

1. Step 1: Check *ngFor syntax

   The correct syntax requires 'let' before the loop variable, so it should be *ngFor="let item of items".

2. Step 2: Verify other parts

   The interpolation {{ item }} is correct, and *ngFor can be used on any element including <div>. The question does not mention if 'items' is defined, so we assume it is.

3. Final Answer:

   The variable declaration is missing 'let' before 'item'. -> Option B

4. Quick Check:

   Always use 'let' before variable in *ngFor = A [OK]

Hint: Always write 'let' before the variable in *ngFor [OK]

Common Mistakes:

• Omitting 'let' keyword
• Assuming *ngFor needs special elements
• Confusing interpolation syntax

5. You have a list of users with some having empty names:

users = [{name: 'Alice'}, {name: ''}, {name: 'Bob'}, {name: null}];

How can you use *ngFor to render only users with a non-empty, non-null name?

hard

A. *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div>

B. *ngFor="let user of users | filter: user.name"

C. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div>

D. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container>

Solution

1. Step 1: Understand filtering in template

   Angular's *ngFor does not support filtering directly. We use *ngIf inside the loop to conditionally show elements.

2. Step 2: Check conditions for non-empty names

   Using *ngIf="user.name" filters out empty strings and null values because they are falsy in Angular templates.

3. Step 3: Compare options

   *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> correctly uses *ngIf="user.name" inside the loop. *ngFor="let user of users" <ng-container *ngIf="user.name">{{ user.name }}</ng-container> has invalid syntax mixing *ngFor and *ngIf on the same element. *ngFor="let user of users | filter: user.name" uses a non-existent filter pipe. *ngFor="let user of users" <div *ngIf="user.name !== ''">{{ user.name }}</div> misses filtering null values.

4. Final Answer:

   *ngFor="let user of users" <div *ngIf="user.name">{{ user.name }}</div> -> Option A

5. Quick Check:

   Use *ngIf inside *ngFor to filter falsy names = D [OK]

Hint: Use *ngIf inside *ngFor to skip empty or null items [OK]

Common Mistakes:

• Trying to filter list directly in *ngFor
• Using invalid syntax combining *ngFor and *ngIf
• Not filtering null values properly