// item-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  standalone: true,
  template: `
    <button (click)="clear()">Clear list</button>
    <ul>
      @for (item of items; track item.id) {
        <li>{{ item.name }}</li>
      } @empty {
        <li>No items</li>
      }
    </ul>
  `,
})
export class ItemListComponent {
  items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ];

  clear() {
    this.items = [];
  }
}

/*
  Notes:
  - track item.id is mandatory in @for — it serves the same role as
    React's key prop, identifying each item across changes.
  - When clear() empties the array, the @empty block renders "No
    items" automatically — no separate conditional needed the way
    React's Todo project had to write one by hand.
*/