*ngFor for list rendering in Angular - Mini Project: Build & Apply

Rendering a List with *ngFor in Angular

📖 Scenario: You are building a simple Angular component to display a list of favorite fruits on a webpage. The list should show each fruit name as a separate item.

🎯 Goal: Create an Angular standalone component that uses *ngFor to render a list of fruits inside an unordered list (<ul>). Each fruit should appear as a list item (<li>).

📋 What You'll Learn

Create a component with a property called fruits that holds an array of strings.

Add a configuration variable called title with the value 'My Favorite Fruits'.

Use *ngFor in the template to loop over fruits and display each fruit inside an <li> element.

Add a heading <h2> that displays the title above the list.

💡 Why This Matters

🌍 Real World

Rendering lists dynamically is common in web apps, such as showing products, messages, or user data.

💼 Career

Understanding *ngFor is essential for Angular developers to build interactive and data-driven user interfaces.

1

Create the fruits array

Create a standalone Angular component named FruitListComponent. Inside the component class, create a property called fruits and set it to the array ["Apple", "Banana", "Cherry"].

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: ``,
})
export class FruitListComponent {
  // Create the fruits array here
}

Hint

Remember to create a property called fruits inside the component class and assign the exact array ["Apple", "Banana", "Cherry"].

2

Add a title property

Inside the FruitListComponent class, add a property called title and set it to the string 'My Favorite Fruits'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: ``,
})
export class FruitListComponent {
  fruits = ["Apple", "Banana", "Cherry"];
  // Add the title property here
}

Hint

Add a property named title with the exact string 'My Favorite Fruits' inside the component class.

3

Use *ngFor to render the fruits list

In the component's template, use an unordered list <ul>. Inside it, use *ngFor="let fruit of fruits" on a list item <li> to display each fruit from the fruits array.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: `
    
  `,
})
export class FruitListComponent {
  fruits = ["Apple", "Banana", "Cherry"];
  title = 'My Favorite Fruits';
}

Hint

Use *ngFor="let fruit of fruits" on the <li> element to loop through the fruits array and display each fruit.

4

Add a heading to display the title

Add an <h2> element above the <ul> in the template. Bind the title property inside the <h2> using interpolation {{ title }}.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: `
    
    
      {{ fruit }}
    
  `,
})
export class FruitListComponent {
  fruits = ["Apple", "Banana", "Cherry"];
  title = 'My Favorite Fruits';
}

Hint

Use an <h2> tag with interpolation {{ title }} above the list to show the heading.

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