Blog>
Snippets

Iterating Over a List with ngFor

Use ngFor to render a list of items from an array. Display each item in a list element.
import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class ItemListComponent {
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
}
This code snippet defines an Angular component with a list of items. It uses the *ngFor directive within the template to iterate over the 'items' array and render each item within an 'li' element.