// todo-item.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  standalone: true,
  template: `
    <li>
      {{ text }}
      <button (click)="deleted.emit(id)">Delete</button>
    </li>
  `,
})
export class TodoItemComponent {
  @Input() id = 0;
  @Input() text = '';
  @Output() deleted = new EventEmitter<number>();
}

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TodoItemComponent],
  template: `
    <ul>
      @for (todo of todos; track todo.id) {
        <app-todo-item
          [id]="todo.id"
          [text]="todo.text"
          (deleted)="onDelete($event)"
        ></app-todo-item>
      }
    </ul>
  `,
})
export class AppComponent {
  todos = [
    { id: 1, text: 'Buy milk' },
    { id: 2, text: 'Walk the dog' },
    { id: 3, text: 'Write Angular notes' },
  ];

  onDelete(id: number) {
    this.todos = this.todos.filter((t) => t.id !== id);
  }
}

/*
  Notes:
  - The child raises deleted.emit(id) on its delete button; the parent
    listens with (deleted)="onDelete($event)", where $event is the
    emitted id.
  - The parent owns the todos array (the single source of truth) and
    removes the matching item — the child never mutates anything
    itself, keeping the same one-way-data-flow discipline as React.
*/