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

Need a 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
}

Need a 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';
}

Need a 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';
}

Need a hint?

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