*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.